Vue.js父子组件通信--子传父（自定义事件）
程序员文章站
2022-06-26 13:25:57
父子组件通信-子传父（自定义事件）一丶子级向父级传递二丶案例代码三丶运行结果——天生我材必有用，千金散尽还复来——一丶子级向父级传递props用于父组件向子组件传递数据，还有一种比较常见的事子组件传递数据或事件到父组件中我们需要用自定义事件来完成什么时候需要自定义事件呢？当子组件需要向父组件传递数据时，就要用到自定义事件v-on不仅仅可以用于监听DOM事件，也可以用于组件间的自定义事件自定义事件的流程：在子组件中，通过$emit()来监听事件在父组件中，通过v-on来监听子组件事...
父子组件通信-子传父（自定义事件）
一丶子级向父级传递
- props用于父组件向子组件传递数据，还有一种比较常见的事子组件传递数据或事件到父组件中
- 我们需要用自定义事件来完成
- 什么时候需要自定义事件呢？
- 当子组件需要向父组件传递数据时，就要用到自定义事件
- v-on不仅仅可以用于监听DOM事件，也可以用于组件间的自定义事件
- 自定义事件的流程：
- 在子组件中，通过$emit()来监听事件
- 在父组件中，通过v-on来监听子组件事件
- 简单例子：
- 我们之前做过两个按钮+1和-1，点击修改counter
- 我们整个操作的过程还是在子组件中完成，但是之后的展示交给父组件
- 这样，我们就需要将子组件中的counter，传给父组件的某个属性，比如total
二丶案例代码
<!--作者：key-->
<!--浏览工具：Chrome-->
<!--开发工具：WebStorm-->
<!--开发时间：2020/11/27 20:25-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1.父组件模板-->
<div id="app">
<cpn @itemclick="cpnclick"></cpn>
</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>
三丶运行结果
——天生我材必有用，千金散尽还复来——
本文地址：https://blog.csdn.net/weixin_43402353/article/details/110246520