如何定义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>` 
    }) 
})()