如何定義VUE組件命名空間的可重複使用的功能

Question

這裏是我的代碼：

Vue.component("ro-webview", { 
    props: ["src"], 
    template: `<div> 
<div> 
<div class="col-md-2 list-inline"> 
${this.getIcon("fa-arrow-left")} 
${this.getIcon("fa-arrow-right")} 
${this.getIcon("fa-refresh")} 
</div> 
<input class="col-md-10" :value="src"/> 
</div> 
<iframe class="col-md-12" :src="src"/> 
</div>`, 

    data: { 
    getIcon: function (iconName) { 
     return `<a class="btn btn-default" href="javascript:void(0)"><i class="fa ${iconName}" aria-hidden="true"></i></a>` 
    } 
    } 
}) 

鉻控制檯加薪

Uncaught TypeError: this.getIcon is not a function 
    (anonymous function) 

定義調用getIcon會引起名稱衝突，那麼如何定義調用getIcon並使它只在我的組件中工作？

Answer 1

你必須methods定義方法，像以下：

Vue.component("ro-webview", { 
    props: ["src"], 
    template: `<div> \ 
     <div> \ 
     <div class="col-md-2 list-inline"> \ 
      <div v-html="getIcon('fa-arrow-left')" /> \ 
      <div v-html="getIcon('fa-arrow-right')" /> \ 
      <div v-html="getIcon('fa-refresh')" /> \ 
     </div> \ 
     <input class="col-md-10" :value="src"/> \ 
     </div> \ 
     <iframe class="col-md-12" :src="src"/> \ 
     </div>`, 
    methods: { 
     getIcon: function (iconName) { 
     return "<a class='btn btn-default href='javascript:void(0)'><i class='fa " + iconName + " aria-hidden='true'></i></a>" 
     } 
    } 
    }) 

，你不需要this在模板代碼來調用方法。

另請參閱v-html的用法。

查看工作fiddle。

Answer 2

另一種方法是用JS匿名函數：

(function() { 
    var getIcon = function (iconName) { 
    return `<li><a class="btn btn-default" href="javascript:void(0)"><i class="fa ${iconName}" aria-hidden="true"></i></a></li>` 
    } 
    Vue.component("ro-webview", { 
    props: ["src"], 
    template: `<div> 
<ul class="list-inline"> 
${getIcon("fa-arrow-left")} 
${getIcon("fa-arrow-right")} 
${getIcon("fa-refresh")} 
<li><input class="col-md-10" :value="src"/></li> 
</ul> 
<iframe class="col-md-12" :src="src"/> 
</div>` 
    }) 
})()