子组件传递信息至父组件：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>
原文地址：https://www.cnblogs.com/xiaoguniang0204/p/12302926.html
时间： 2024-12-12 16:53:09