一.html
<!-- 在子组件中,通过$emit()来触发事件
在父组件中,通过v-on来监听子组件事件 -->
<!-- 父组件模版 -->
<div id="app">
<cpn @itemclick ="cpnClick"></cpn>
</div>
<!-- 子组件模版 -->
<template id="cpn">
<div>
<button v-for ="item in movies" @click ="btnClick(item)">{{item.name}}</button>
</div>
</template>
二.script
//子组件
const cpn ={
template:"#cpn",
data () {
return {
movies:[
{id : "aaa" , name : "家用电器"},
{id : "bbb" , name : "数码宝贝"},
{id : "ccc" , name : "硕果累累"},
{id : "ddd" , name : "南拳北斗"},
]
}
},
methods: {
btnClick(item){
//发射事件
this.$emit('itemclick',item) //(事件名称(这里自定义的),传递过去的参数)
}
}
}
//root组件
const app = new Vue({
el:"#app",
data:{
message:'哈哈',
},
components:{
cpn
},
methods: {
cpnClick(item){
console.log('cpnClick',item);
}
}
})