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>`
    }
  }
})

chrome console raise

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>`
  })
})()

如何在vue组件命名空间中定义可重用的函数

2 个答案: