Vue3兄弟组件传值

Vue3中没有明确的兄弟组件传值,可以使用状态提升,找到这两个组件的共同父级组件,然后通过父与子之间的传值实现

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

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

 定义组件模板

• 那么开始组件通信的四步骤,
• 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就是父组件默认颜色

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

那么先来注册父组件,并且使用一个方法把自定义事件的函数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
        }
    }

那么整体代码如下