子组件传递信息至父组件:
1、子组件发射自定义事件及信息,自定义事件名称b=function(){this.$emit("发射事件a",参数)}
2、自定义模版中,设置对自定义事件的触发条件监听,如@click=“自定义事件b”
3、父组件中设置监听,@“发射事件a及参数”="父组件事件c及参数",实现将子组件信息传至父组件
从而实现子组件信息传达至父组件
<body>
<div id = "app">
<cnp @btclick="fclick"></cnp>
</div>
<!-- //template 编写自己的模版 -->
<template id = "mytemp">
<div>
//v-on绑定自定义事件
<button v-for="item in categories" @click="chclick(item)" >
{{item.name}}
</button>
</div>
</template>
<script>
//创建子组件 #mytemp 创建组件构造器对象
const cnp = {
template:"#mytemp",
data () {
return {
categories:[
{id:"aaa",name:"电器"},
{id:"bbb",name:"食品"},
{id:"ccc",name:"服装"},
]
}
},
methods: {
chclick(item){
//发射事件(自定义事件):名称,参数
this.$emit("btclick",item)
}
}
}
//创建父组件
const app = new Vue({
el:"#app",
data () {
return {
}
},
methods:{
fclick(item){
console.log('打印子组件传递信息' + item.name);
}
},
//组件注册的语法糖
components: {
cnp
}
});
</script>
</body>