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 调用。（创建一个调用全局函数的方法可以说是一个更好的主意。）

您的代码的主要困难是驼峰式命名法，它应该是短横线命名法。

如果你想从 中insertItem获取，HTML 应该只给出函数名称，Vue 将负责传递参数：arg$emit

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

我的代码片段使用您的原始代码，该代码提供来自父 Vue 的 arg。

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

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