VueJS发出到VueJS之外的函数。

Question

我正在尝试从我的VueJS组件中发出一些东西到一个位于包含该组件的html页面中的函数。我是不是漏掉了什么，还是这不可能？

在我的组件中作为一种方法：

insert: function(){
    this.$emit('insertItem', 123);
}

在包含组件的页面中：

<medialibrary @insertItem="insertItem(arg);"></medialibrary>


<script>
    function insertItem(arg){
        console.log('insertItem');
        console.log(arg);
    }
</script>

Answer 1

这实际上比乍看上去更有可能。如果函数是全局的(尤其是对父Vue可见的)，则Vue可以调用它，即使它不是Vue的方法。(可以说，创建一个调用全局函数的方法是一个更好的主意。)

您的代码的主要困难是camelCasing，它应该是kebab-case。

如果您希望insertItem从$emit获取arg，HTML只应该给出函数名，Vue将负责传递args：

<medialibrary id="app" @insert-item="insertItem"></medialibrary>

我的代码片段使用您的原始代码，它从父Vue提供arg。

​

function insertItem(arg) {
  console.log('insertItem');
  console.log(arg);
}

new Vue({
  el: '#app',
  data: {
    arg: 'hi there'
  },
  components: {
    medialibrary: {
      template: '<div><button @click="insert">Insert</button></div>',
      methods: {
        insert() {
          console.log("Emit");
          this.$emit('insert-item', 123);
        }
      }
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.2/vue.min.js"></script>
<medialibrary id="app" @insert-item="insertItem(arg);"></medialibrary>

​