我有一个简单的代码来测试子组件和父组件之间的通信，遵循 vuejs 文档中的示例:http://vuejs.org/guide/components.html#Using-v-on-with-Custom-Events .但显然它在父组件中不起作用
我的 jsfiddle:Jsfiddle
html:
Vue.component('tasks-item', {
template: '<div>{{item.title}} <button v-on:click="deleteItem(item)">x</button></div>',
props: ['item'],
methods: {
deleteItem: function(item){
console.log('child click')
document.getElementById('output').innerHTML='child click : '+item.title
this.$emit('deleteItem')
}
}
})
Vue.component('tasks-list', {
template: '#tasks-list',
props: ['tasks'],
methods: {
deleteTask: function(){
document.getElementById('output').innerHTML='parent click'
}
}
})
new Vue({
el: '#app',
data: function(){
return {
data:[{"id":51,"title":"rr4434","content":"rtrtrrtrtr"},{"id":50,"title":"rrrr","content":"rrr"},{"id":49,"title":"rrrr","content":"rrr"},{"id":48,"title":"rrr","content":"rrr"},{"id":47,"title":"rrr","content":"rrr"},
{"id":46,"title":"c\u00f4 d\u00e2\u0300n","content":"pha\u0309i khong em"},
{"id":45,"title":"we are you","content":"content"},
{"id":44,"title":"cai min nek","content":"co gi kh\u00f4ng"},{"id":43,"title":"abc","content":"dghjj"},{"id":42,"title":"dddd","content":"ddd"},{"id":38,"title":"444","content":"4444"},{"id":36,"title":"rrr","content":"rr"},{"id":35,"title":"rr","content":"rr"},{"id":34,"title":"rrrr","content":"rrr"},{"id":33,"title":"rrr","content":"rr"}]
}
},
methods: {
}
})<script src="https://unpkg.com/vue@next/dist/vue.js"></script>
<div id="app">
<div id="output">click output</div>
<hr/>
<tasks-list :tasks="data"></tasks-list>
</div>
<template id="tasks-list">
<div>
<div v-for="item in tasks">
<tasks-item :item="item" v-on:deleteItem="deleteTask()"></tasks-item>
</div>
</div>
</template>最佳答案
改变
this.$emit('deleteItem')
到
this.$emit('delete-item')
并在模板内部修复组件的 v-on from
v-on:deleteItem
到
v-on:delete-item
您可以在 https://v2.vuejs.org/v2/guide/components-custom-events.html 阅读更多内容
关于javascript - Vue js 2 : this. $emit 不触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40068362/