Vue3兄弟组件传值实现过程

更新时间：2025年09月13日 09:51:33 作者：前端青山

Vue3兄弟组件传值通过状态提升实现,父组件Root与子组件Left、Right使用props和自定义事件双向绑定颜色,利用updated生命周期同步状态,核心步骤为定义组件、注册组件及事件传递

Vue3中没有明确的兄弟组件传值

可以使用状态提升，找到这两个组件的共同父级组件，然后通过父与子之间的传值实现

那么首先咱们先定义一个父组件Root 和两个子组件我们取名叫Left和Right，要实现的效果是两个取色器可以双向绑定，一方改变颜色另一方与其同步一致

它是利用第三方进行 子传父， 父传子，依次进行绑定

定义组件模板

<div id="app">
 <my-root></my-root>
</div>

<template id="root">
 
</template>

<template id="left">
   
</template>

<template id="right">
  
    </div>
</template>

开始组件通信的四步骤：

1.定义组件模块
2.定义组件
3.注册组件
4.使用组件

  const Left = {
        template:'#left'，
        data(){
            return{
                leftColor:'#0ff'//初始化数据颜色
            }
        }，
    
    }
    const Right = {
        template:'#right'，
        data(){
            return{
                rightColor:'#00f'//初始化数据颜色
            }
        }，
    }
    const Root = {
        template:'#root'，
        data(){
            return{
                color:''
            }
        }，
        components:{
            MyLeft: Left，
            MyRight:Right，
        }
    }

    Vue.createApp({
        components:{
            MyRoot:Root
        }
    }).mount('#app')

接下来给父组件中添加子组件内容及数据，创建自定义事件change-color="getColor"获取当前颜色，:color="color":绑定事件color就是父组件默认颜色

<template id="root">
    <my-left @change-color="getColor" :color="color"></my-left>
    <!-- 添加自定义事件 -->
    <my-right :color="color" @change-color="getColor"></my-right>
</template>

给子组件Left 和 Right 添加内容，那么我这边是写了两个取色器的小盒子，取色器 v-model 双向绑定颜色变量名

<template id="left">
    <div :style="{width:'100px'，height:'100px'，float:'left'，'background-color':leftColor}">
        <input type="color" v-model="leftColor">
    </div>
</template>
<template id="right">
    <div :style="{width:'100px'，height:'100px'，float:'left'，'background-color':rightColor}">
        <input type="color" v-model="rightColor">
    </div>
</template>

那么先来注册父组件，并且使用一个方法把自定义事件的函数getColor 给一个形参 val 设置当前颜色 this.color 为形参val

 const Root = {
        template:'#root'，
        data(){
            return{
                color:''
            }
        }，
        methods:{
            getColor(val){//自定义事件函数
                this.color = val  //当前颜色
            }
        }，
        components:{//子组件left和right
            MyLeft: Left，
            MyRight:Right，
        }
    }
    Vue.createApp({
        components:{
            MyRoot:Root
        }
    }).mount('#app')

注册使用子组件Left

那么我们先监听当前变量值，给一个函数leftColor(newval)利用子传父 $emit('自定义事件名'，参数)来进行监听

此时页面还是无法双向绑定，所以我们要在生命周期钩子函数updated更新后进行渲染页面的方法，当前变量就等于当前绑定的color颜色值

反之，当我们需要实现左右两个取色器盒子同步绑定渲染，子组件传给父组件后，left传给父，父传给right，right传给父，父传给left，这里我们用到了父传子props['自定义属性']

 const Left = {
        template:'#left'，
        data(){
            return{
                leftColor:'#0ff'//初始化数据
            }
        }，
        props:['color']，//父传子
        watch:{//监听
            leftColor(newval){
                this.$emit('change-color'，newval) //this.$emit('自定义事件'，参数) 子传父
            }
        }，
        updated(){//更新后
            this.leftColor = this.color //当前盒子颜色等于color
        }
    }

那么右边与左边一样的逻辑，right传父，父传left，left传父，父给right

 const Right = {
        template:'#right'，
        props:['color']，
        data(){
            return{
                rightColor:'#00f'
            }
        }，
        watch:{
            rightColor(newval){
                this.$emit('change-color'，newval)
            }
        }，
        updated(){
            this.rightColor = this.color
        }
    }

那么整体代码如下

<body>
    <div id="app">
        <my-root></my-root>
    </div>
</body>
<template id="root">
    <my-left @change-color="getColor" :color="color"></my-left>
    <!-- 添加自定义事件 -->
    <my-right :color="color" @change-color="getColor"></my-right>
</template>
<template id="left">
    <div :style="{width:'100px'，height:'100px'，float:'left'，'background-color':leftColor}">
        <input type="color" v-model="leftColor">
    </div>
</template>
<template id="right">
    <div :style="{width:'100px'，height:'100px'，float:'left'，'background-color':rightColor}">
        <input type="color" v-model="rightColor">
    </div>
</template>
<script src="../lib/vue.global.js"></script>
<script>
    const Left = {
        template:'#left'，
        data(){
            return{
                leftColor:'#0ff'//初始化数据
            }
        }，
        props:['color']，//父传子
        watch:{//监听
            leftColor(newval){
                this.$emit('change-color'，newval) //this.$emit('自定义事件'，参数) 子传父
            }
        }，
        updated(){//更新后
            this.leftColor = this.color //当前盒子颜色等于color
        }
    }
    const Right = {
        template:'#right'，
        props:['color']，
        data(){
            return{
                rightColor:'#00f'
            }
        }，
        watch:{
            rightColor(newval){
                this.$emit('change-color'，newval)
            }
        }，
        updated(){
            this.rightColor = this.color
        }
    }
    const Root = {
        template:'#root'，
        data(){
            return{
                color:''
            }
        }，
        methods:{
            getColor(val){//自定义事件函数
                this.color = val
            }
        }，
        components:{
            MyLeft: Left，
            MyRight:Right，
        }
    }
    Vue.createApp({
        components:{
            MyRoot:Root
        }
    }).mount('#app')
</script>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

一文带你深入理解Vue3中的emit使用
这篇文章主要介绍了Vue3中通过emit实现父子组件通信的方法,包括基础概念、使用方法、配合props实现完整父子通信、在TypeScript中的类型推断以及注意事项与最佳实践,需要的朋友可以参考下
2025-01-01
Vue中methods的this指向问题浅析
相信我们写Vue代码时肯定都会在methods中用过this这个关键字，甚至还打印过this查看其内容。最终发现该实例对象竟然是我们的Vue实例对象
2022-10-10
vue.js Router中嵌套路由的实用示例
这篇文章主要给大家介绍了关于vue.js Router中嵌套路由的相关资料,所谓嵌套路由就是路由里面嵌套他的子路由,文章通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-06-06
vue项目发布有缓存正式环境不更新的解决方案
vue项目每次发布新版本后,测试人员都要强制刷新才能更新浏览器代码来验证bug,下面这篇文章主要给大家介绍了关于vue项目发布有缓存正式环境不更新的解决方案,需要的朋友可以参考下
2024-03-03
vue项目引入svg图标的完整步骤
在实际的项目开发中,使用svg图标占用内存比图片更小,映入图片内存比较大,同时也适用于不同屏幕的尺寸,下面这篇文章主要给大家介绍了关于vue项目引入svg图标的完整步骤,需要的朋友可以参考下
2022-10-10
ejsExcel模板在Vue.js项目中的实际运用
这篇文章主要介绍了ejsExcel模板在Vue.js项目中的实际运用,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
vue项目实现会议预约功能(包含某天的某个时间段和某月的某几天)
这篇文章主要介绍了vue项目实现会议预约功能(包含某天的某个时间段和某月的某几天),本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-02-02
clipboard在vue中的使用的方法示例
这篇文章主要介绍了clipboard在vue中的使用的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
vue3版本网页小游戏设计思路
最近火爆全网的羊了个羊小程序，背景是根据官方介绍，“羊了个羊”是一款闯关消除小游戏，通关率不到0.1%。主要玩法为重叠的各类方块，需要在下方7个栏内完成消除，其特点就是“极难”，也因此成为热门挑战，对vue3版本网页小游戏设计思路感兴趣的朋友跟随小编一起看看吧
2022-12-12
详解在vue3中使用jsx的配置以及一些小问题
本文主要介绍了在vue3中使用jsx的配置以及一些小问题，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03