<body>
<div id="app">
<cpn @itemclick="cpnClick"></cpn> <!--// ②父组件接收 @事件名-->
</div>
<template id="cpn">
<div>
<button v-for="item in categories" @click="btnClick(item)">{{item.name}}</button>
</div>
</template>
<script src="../vue.js"></script>
<script>
const cpn = {
template:'#cpn',
data(){
return {
categories:[
{id:111,name:"热门推荐"},
{id:222,name:"家用电器"},
{id:333,name:"手机数码"},
{id:444,name:"电脑办公"}
]
}
},
methods:{
btnClick(item){
console.log("点击了"+item.name);
this.$emit('itemclick',item); // ①子组件发射，参数1：事件名称，参数2：数据
},
}
}
const app = new Vue({
el:"#app",
data:{
message:"世界你好"
},
methods: {
// ③父组件接收数据并处理
cpnClick(item){
console.log('子组件点击了'+item.name);
}
},
components:{
cpn
}
});
</script>
</body>
</html>
1453
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
