我正在尝试将vuejs组件中的某些内容发射到包含组件的HTML页面中的函数。我错过了什么,还是不可能?
在我的组件中作为一种方法:
insert: function(){
this.$emit('insertItem', 123);
}
在包含组件的页面中:
<medialibrary @insertItem="insertItem(arg);"></medialibrary>
<script>
function insertItem(arg){
console.log('insertItem');
console.log(arg);
}
</script>
这实际上比最初看起来更有可能。如果该函数是全局的(尤其是对父vue可见(,则可以通过VUE调用,即使它不是VUE的方法。(可以说,创建一种调用全局函数的方法是一个更好的主意。(
您的代码的主要困难是骆驼在应该是烤肉串的位置。
如果您希望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>