子组件:
//子组件
export default{
data(){
return {
// 需要传递给父组件的值
count: 0
}
},
methods:{
add(){
// 通过$emit()触发自定义事件
// 参数1:自己定义的事件名,供父组件使用
// 参数2:需要传递的参数
this.$emit('numchange',this.count)
}
}
}
父组件:
// 父组件
<Son @numchange="getNewCount"></Son>
export default{
data(){
return {
// 接收子组件传递过来的值
countFromSon: 0
}
},
methods:{
// 获取子组件传递过来的数据
// 参数val: 与this.count对应(子组件中$emit'参数2'对应)
getNewCount(val){
// 赋值
this.countFromSon = val
}
}
}
本文详细介绍了如何在Vue应用中,通过自定义事件和$emit/$on实现子组件向父组件的数据传递,包括创建数据、触发事件和接收事件的方法。
2114

被折叠的 条评论
为什么被折叠?



