一、子组件向父组件传递数据
子组件向父组件传递数据时，使用自定义事件实现
- 自定义事件的流程：
- 在子组件中，通过$emit()来监听事件
- 在父组件中，通过v-on来监听子组件事件
二、代码
<!--作者：ikunsdc-->
<!--开发时间：2021/03/01 22:43-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1.父组件模板-->
<div id="app">
<cpn @itemclick="cpnclick"></cpn> <!--父组件监听：如果自定义的itemclick事件发生，则执行父中处理方法-->
</div>
<!--2.子组件模板-->
<template id="cpn">
<div>
<button v-for="item in categories" @click="itemclick(item)"><!--子组件发送：子组件发送自定义事件，此处按钮点击触发。-->
{
{item.name}}
</button>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 1.子组件
const cpn = {
template: '#cpn',
data(){
return{
categories:[
{id:'100',name:'热门推荐'},
{id:'101',name:'手机数码'},
{id:'102',name:'家用电器'},
{id:'103',name:'电脑办公'},
]
}
},
methods:{
itemclick(item){
console.log(item);
//将item传给父组件，自定义
//this.$emit('自定义的事件名称'，传送参数）
this.$emit('itemclick',item)
}
}
}
//2.父组件
const app = new Vue({
el:"#app",
data:{
},
components:{
cpn
},
methods:{
cpnclick(item){
console.log('cpnclick',item);
}
}
})
</script>
</body>
</html>
三、运行
