vue兄弟组件传值

最新推荐文章于 2024-09-25 15:49:24 发布

不喜欢it的程序猿

最新推荐文章于 2024-09-25 15:49:24 发布

阅读量211

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/hyz002/article/details/104901299

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了在前端开发中，子组件如何通过this.$emit向父组件传递数据，以及父组件如何接收并处理这些数据的方法。同时，也阐述了弟弟组件如何通过props接收父组件传递的值，并在template中直接使用。

摘要由CSDN通过智能技术生成

采用的是子传父，父传子的方式
1，子传父：
通过this.$emit(‘func’,this.groupData)
func:是定义的一个方法名，
groupData:是要传的东西

get_api_service_api_group(
{
user_service_id: self.user_service_id
}
).then(res => {
console.log(res)
this.groupData = res.groups
this. $KaTeX parse error: Expected 'EOF', got '}' at position 55: \dotss.init() }̲).catch(err => \dots$ route.params.group_id,
group_name: this. $route.params.group_name, GroupData:[] // service_id: this.$ route.params.service_id
}
},
created() {
this.group_id = this. $route.params.group_id this.group_name = this.$ route.params.group_name
console.log(this.group_id, this.group_name, ‘父组件的状态’)
// this.service_id = this.$route.params.service_id
},
methods: {
getMsgFormSon(data){
console.log(data, ‘接受值’)
this.GroupData = data
}
}
}
3，弟弟组件接受父的值
props:{
GroupData:{
type:[Array],
default:""
}
},
然后直接在template中使用