Vue3兄弟組件傳值實(shí)現(xiàn)過程

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

Vue3兄弟組件傳值通過狀態(tài)提升實(shí)現(xiàn),父組件Root與子組件Left、Right使用props和自定義事件雙向綁定顏色,利用updated生命周期同步狀態(tài),核心步驟為定義組件、注冊組件及事件傳遞

Vue3中沒有明確的兄弟組件傳值

可以使用狀態(tài)提升，找到這兩個組件的共同父級組件，然后通過父與子之間的傳值實(shí)現(xiàn)

那么首先咱們先定義一個父組件Root 和兩個子組件我們?nèi)∶蠰eft和Right，要實(shí)現(xiàn)的效果是兩個取色器可以雙向綁定，一方改變顏色另一方與其同步一致

它是利用第三方進(jìn)行 子傳父， 父傳子，依次進(jìn)行綁定

定義組件模板

<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'//初始化數(shù)據(jù)顏色
            }
        }，
    
    }
    const Right = {
        template:'#right'，
        data(){
            return{
                rightColor:'#00f'//初始化數(shù)據(jù)顏色
            }
        }，
    }
    const Root = {
        template:'#root'，
        data(){
            return{
                color:''
            }
        }，
        components:{
            MyLeft: Left，
            MyRight:Right，
        }
    }

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

接下來給父組件中添加子組件內(nèi)容及數(shù)據(jù)，創(chuàng)建自定義事件change-color="getColor"獲取當(dāng)前顏色，:color="color":綁定事件color就是父組件默認(rèn)顏色

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

給子組件Left 和 Right 添加內(nèi)容，那么我這邊是寫了兩個取色器的小盒子，取色器 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>

那么先來注冊父組件，并且使用一個方法把自定義事件的函數(shù)getColor 給一個形參 val 設(shè)置當(dāng)前顏色 this.color 為形參val

 const Root = {
        template:'#root'，
        data(){
            return{
                color:''
            }
        }，
        methods:{
            getColor(val){//自定義事件函數(shù)
                this.color = val  //當(dāng)前顏色
            }
        }，
        components:{//子組件left和right
            MyLeft: Left，
            MyRight:Right，
        }
    }
    Vue.createApp({
        components:{
            MyRoot:Root
        }
    }).mount('#app')

注冊使用子組件Left

那么我們先監(jiān)聽當(dāng)前變量值，給一個函數(shù)leftColor(newval)利用子傳父 $emit('自定義事件名'，參數(shù))來進(jìn)行監(jiān)聽

此時頁面還是無法雙向綁定，所以我們要在生命周期鉤子函數(shù)updated更新后進(jìn)行渲染頁面的方法，當(dāng)前變量就等于當(dāng)前綁定的color顏色值

反之，當(dāng)我們需要實(shí)現(xiàn)左右兩個取色器盒子同步綁定渲染，子組件傳給父組件后，left傳給父，父傳給right，right傳給父，父傳給left，這里我們用到了父傳子props['自定義屬性']

 const Left = {
        template:'#left'，
        data(){
            return{
                leftColor:'#0ff'//初始化數(shù)據(jù)
            }
        }，
        props:['color']，//父傳子
        watch:{//監(jiān)聽
            leftColor(newval){
                this.$emit('change-color'，newval) //this.$emit('自定義事件'，參數(shù)) 子傳父
            }
        }，
        updated(){//更新后
            this.leftColor = this.color //當(dāng)前盒子顏色等于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'//初始化數(shù)據(jù)
            }
        }，
        props:['color']，//父傳子
        watch:{//監(jiān)聽
            leftColor(newval){
                this.$emit('change-color'，newval) //this.$emit('自定義事件'，參數(shù)) 子傳父
            }
        }，
        updated(){//更新后
            this.leftColor = this.color //當(dāng)前盒子顏色等于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){//自定義事件函數(shù)
                this.color = val
            }
        }，
        components:{
            MyLeft: Left，
            MyRight:Right，
        }
    }
    Vue.createApp({
        components:{
            MyRoot:Root
        }
    }).mount('#app')
</script>