vue3中兄弟组件间传递

一名写前端的GISer

已于 2024-05-06 16:50:35 修改

阅读量558

点赞数 8

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2024-03-25 15:15:53 首次发布

本文链接：https://blog.youkuaiyun.com/wangchaohpu/article/details/137014425

版权

24 篇文章

订阅专栏

本文详细介绍了在Vue应用中，兄弟组件间如何通过事件（emit）进行数据传递，以及父组件如何将数据传递给子组件（props）。包括Vue2和Vue3的实现方式以及相关代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：同一个父组件中的兄弟组件间通信

总体思路：

（1）兄弟组件1将数据传递给父组件

（2）父组件将数据传递给兄弟组件2

样例：

父组件parent.vue

<template>
    <child1></child1>
    <child2 @sendData="getDataFromChild2"></child2>
</template>

1、兄弟组件child2将数据传递给父组件parent

child2.vue中代码：

vue2写法

methods:{
        child1SendToFather(){
            this.$emit('sendData','111111')
        }
    }

vue3写法

setup(props,ctx){
    fun(){
        ctx.emit('sendData','111111')
    }

}

2、父组件parent接收传递的数据

parent.vue中代码

<template>
    <child1></child1>
    <child2 @sendData="getDataFromChild2"></child2>
</template>

getDataFromChild2(data){
    //data为从组件child2中传递过来的数据
    console.log(data)
}

3、父组件parent.vue将数据传递给子组件child1

parent.vue中代码：

<template>
    <child1 :sendDataToChild1="tocChild1Data"></child1>
    <child2 @sendData="getDataFromChild2"></child2>
</template>

getDataFromChild2(data){
    //data为从组件child2中传递过来的数据
    console.log(data)
    this.tocChild1Data = data;
}

4、子组件child1接收数据

props: {
       //使用props接收从父组件传递的数据tocChild1Data
      tocChild1Data:{
         type:String
      }

 }