vue組件之間相互傳值的方式有哪些

這篇文章給大家分享的是有關(guān)vue組件之間相互傳值的方式有哪些的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

概述

我們都知道 Vue 作為一個(gè)輕量級(jí)的前端框架，其核心就是組件化開(kāi)發(fā)。Vue 就是由一個(gè)一個(gè)的組件構(gòu)成的，組件化是它的精髓，也是最強(qiáng)大的功能之一。而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互引用。

但在實(shí)際項(xiàng)目開(kāi)發(fā)過(guò)程中，我們需要訪問(wèn)其他組件的數(shù)據(jù)，這樣就就有了組件通信的問(wèn)題。在 vue 中組件之間的關(guān)系有：父子，兄弟，隔代。針對(duì)不同的關(guān)系，怎么實(shí)現(xiàn)數(shù)據(jù)傳遞，就是接下來(lái)要講的。

一、父組件向子組件傳值

即父組件通過(guò)屬性的方式向子組件傳值，子組件通過(guò) props 來(lái)接收。

在父組件的子組件標(biāo)簽中綁定自定義屬性

// 父組件
<user-detail :myName="name" />
    
export default {
    components: {
        UserDetail
    }
    ......
}

在子組件中使用props（可以是數(shù)組也可以是對(duì)象）接收即可?？梢詡鞫鄠€(gè)屬性。

// 子組件
export default {
    props: ['myName']
}

/*
props: { myName: String } //這樣指定傳入的類(lèi)型，如果類(lèi)型不對(duì)會(huì)警告
props: { myName: [String, Number] } // 多個(gè)可能的類(lèi)型
prosp: { myName: { type: String, requires: true } } //必填的的字符串
props: { 
    childMsg: { 
        type: Array, 
        default: () => [] 
    }
}  // default指定默認(rèn)值
如果 props 驗(yàn)證失敗，會(huì)在控制臺(tái)發(fā)出一個(gè)警告。
*/

子組件接收的父組件的值分為引用類(lèi)型和普通類(lèi)型兩種：

普通類(lèi)型：字符串（String）、數(shù)字（Number）、布爾值（Boolean）、空（Null）

引用類(lèi)型：數(shù)組（Array）、對(duì)象（Object）

基于 vue 的單向數(shù)據(jù)流，即組件之間的數(shù)據(jù)是單向流通的，子組件是不允許直接對(duì)父組件傳來(lái)的值進(jìn)行修改的，所以應(yīng)該避免這種直接修改父組件傳過(guò)來(lái)的值的操作，否則控制臺(tái)會(huì)報(bào)錯(cuò)。

如果傳過(guò)來(lái)的值是簡(jiǎn)單數(shù)據(jù)類(lèi)型，是可以在子組件中修改，也不會(huì)影響其他兄弟組件內(nèi)同樣調(diào)用了來(lái)自該父組件的值。

具體操作是可以先把傳過(guò)來(lái)的值重新賦值給data中的一個(gè)變量，然后再更改那個(gè)變量。

// 子組件
export default {
    props: ['myName'],
    data() {
        return {
            name : this.myName    // 把傳過(guò)來(lái)的值賦值給新的變量
        }
    },
    watch: {
        myName(newVal) {
            this.name = newVal //對(duì)父組件傳過(guò)來(lái)的值進(jìn)行監(jiān)聽(tīng)，如果改變也對(duì)子組件內(nèi)部的值進(jìn)行改變
        }
    },
    methods: {
        changeName() {  
            this.name = 'Lily'  // 這里修改的只是自己內(nèi)部的值，就不會(huì)報(bào)錯(cuò)了
        },
    }
}

注：如果不使用 watch 來(lái)監(jiān)聽(tīng)父組件傳遞的 myName 值，子組件中的 name 值是不會(huì)隨著父組件的 myName 值進(jìn)行改變，因?yàn)?data 中 name: this.myName 僅僅只是定義了一個(gè)初始值。

如果引用類(lèi)型的值，當(dāng)在子組件中修改后，父組件的也會(huì)修改，因其數(shù)據(jù)是公用的，其他同樣引用了該值的子組件也會(huì)跟著被修改?？梢岳斫獬筛附M件傳遞給子組件的值，就相當(dāng)于復(fù)制了一個(gè)副本，這個(gè)副本的指針還是指向父組件中的那個(gè)，即共享同一個(gè)引用。所以除非有特殊需要，否則不要輕易修改。

二、子組件向父組件傳值

1.子組件綁定一個(gè)事件，通過(guò) this.$emit() 來(lái)觸發(fā)

在子組件中綁定一個(gè)事件，并給這個(gè)事件定義一個(gè)函數(shù)

// 子組件
<button @click="changeParentName">改變父組件的name</button>

export default {
    methods: {
        //子組件的事件
        changeParentName: function() {
            this.$emit('handleChange', 'Jack') // 觸發(fā)父組件中handleChange事件并傳參Jack
            // 注：此處事件名稱(chēng)與父組件中綁定的事件名稱(chēng)要一致
        }
    }
}

在父組件中定義并綁定 handleChange 事件

// 父組件
<child @handleChange="changeName"></child>

methods: {
    changeName(name) {  // name形參是子組件中傳入的值Jack
        this.name = name
    }
}

2.通過(guò) callback 函數(shù)

先在父組件中定義一個(gè)callback函數(shù)，并把 callback 函數(shù)傳過(guò)去

// 父組件
<child :callback="callback"></child>

methods: {
    callback: function(name) {
        this.name = name
    }
}

在子組件中接收，并執(zhí)行 callback 函數(shù)

// 子組件
<button @click="callback('Jack')">改變父組件的name</button>

props: {
    callback: Function,
}

3. 通過(guò) $parent / $children 或 $refs 訪問(wèn)組件實(shí)例

這兩種都是直接得到組件實(shí)例，使用后可以直接調(diào)用組件的方法或訪問(wèn)數(shù)據(jù)。

// 子組件
export default {
  data () {
    return {
      title: '子組件'
    }
  },
  methods: {
    sayHello () {
        console.log('Hello');
    }
  }
}

// 父組件
<template>
  <child ref="childRef" />
</template>

<script>
  export default {
    created () {
      // 通過(guò) $ref 來(lái)訪問(wèn)子組件
      console.log(this.$refs.childRef.title);  // 子組件
      this.$refs.childRef.sayHello(); // Hello
      
      // 通過(guò) $children 來(lái)調(diào)用子組件的方法
      this.$children.sayHello(); // Hello 
    }
  }
</script>

注：這種方式的組件通信不能跨級(jí)。

三、兄弟組件之間傳值

1. 還是通過(guò) $emit 和 props 結(jié)合的方式

在父組件中給要傳值的兩個(gè)兄弟組件都綁定要傳的變量，并定義事件

// 父組件
<child-a :myName="name" />
<child-b :myName="name" @changeName="editName" />  
    
export default {
    data() {
        return {
            name: 'John'
        }
    },
    components: {
        'child-a': ChildA,
        'child-b': ChildB,
    },
    methods: {
        editName(name) {
            this.name = name
        },
    }
}

在子組件B中接收變量和綁定觸發(fā)事件

// child-b 組件
<p>姓名：{{ myName }}</p>
<button @click="changeName">修改姓名</button>
    
<script>
export default {
    props: ["myName"],
    methods: {
        changeName() {
            this.$emit('changeName', 'Lily')   // 觸發(fā)事件并傳值
        }
    }
}
</script>

// child-a 組件
<p>姓名：{{ newName }}</p>
    
<script>
export default {
    props: ["myName"],
    computed: {
        newName() {
            if(this.myName) { // 判斷是否有值傳過(guò)來(lái)
                return this.myName
            }
            return 'John' //沒(méi)有傳值的默認(rèn)值
        }
    }
}
</script>

即：當(dāng)子組件B 通過(guò) $emit() 觸發(fā)了父組件的事件函數(shù) editName，改變了父組件的變量name 值，父組件又可以把改變了的值通過(guò) props 傳遞給子組件A，從而實(shí)現(xiàn)兄弟組件間數(shù)據(jù)傳遞。

2.通過(guò)一個(gè)空 vue 實(shí)例

創(chuàng)建一個(gè) EventBus.js 文件，并暴露一個(gè) vue 實(shí)例

import Vue from 'Vue'
export default new Vue()

在要傳值的文件里導(dǎo)入這個(gè)空 vue 實(shí)例，綁定事件并通過(guò) $emit 觸發(fā)事件函數(shù)

(也可以在 main.js 中全局引入該 js 文件，我一般在需要使用到的組件中引入)

<template>
    <div>
        <p>姓名: {{ name }}</p>
        <button @click="changeName">修改姓名</button>
    </div>
</template>

<script>
import { EventBus } from "../EventBus.js"

export default {
 data() {
     return {
         name: 'John',
     }
  },
  methods: {
      changeName() {
          this.name = 'Lily'
          EventBus.$emit("editName", this.name) // 觸發(fā)全局事件,并且把改變后的值傳入事件函數(shù)
      }
    }
}
</script>

在接收傳值的組件中也導(dǎo)入 vue 實(shí)例，通過(guò) $on 監(jiān)聽(tīng)回調(diào)，回調(diào)函數(shù)接收所有觸發(fā)事件時(shí)傳入的參數(shù)

import { EventBus } from "../EventBus.js"

export default {
    data() {
        return {
            name: ''
        }
    },
    created() {
         EventBus.$on('editName', (name) => {
             this.name = name
         })
    }
}

這種通過(guò)創(chuàng)建一個(gè)空的 vue 實(shí)例的方式，相當(dāng)于創(chuàng)建了一個(gè)事件中心或者說(shuō)是中轉(zhuǎn)站，用來(lái)傳遞和接收事件。這種方式同樣適用于任何組件間的通信，包括父子、兄弟、跨級(jí)，對(duì)于通信需求簡(jiǎn)單的項(xiàng)目比較方便，但對(duì)于更復(fù)雜的情況，或者項(xiàng)目比較大時(shí)，可以使用 vue 提供的更復(fù)雜的狀態(tài)管理模式 Vuex 來(lái)進(jìn)行處理。

四、多層父子組件通信

有時(shí)需要實(shí)現(xiàn)通信的兩個(gè)組件不是直接的父子組件，而是祖父和孫子，或者是跨越了更多層級(jí)的父子組件，這種時(shí)候就不可能由子組件一級(jí)一級(jí)的向上傳遞參數(shù)，特別是在組件層級(jí)比較深，嵌套比較多的情況下，需要傳遞的事件和屬性較多，會(huì)導(dǎo)致代碼很混亂。

這時(shí)就需要用到 vue 提供的更高階的方法：provide/inject。

這對(duì)選項(xiàng)需要一起使用，以允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴(lài)，不論組件層次有多深，并在起上下游關(guān)系成立的時(shí)間里始終生效。

provide/inject：簡(jiǎn)單來(lái)說(shuō)就是在父組件中通過(guò)provider來(lái)提供變量，然后在子組件中通過(guò)inject來(lái)注入變量，不管組件層級(jí)有多深，在父組件生效的生命周期內(nèi)，這個(gè)變量就一直有效。

父組件：

export default {
  provide: { // 它的作用就是將 **name** 這個(gè)變量提供給它的所有子組件。
    name: 'Jack'
  }
}

子組件：

export default {
  inject: ['name'], // 注入了從父組件中提供的name變量
  mounted () {
    console.log(this.name);  // Jack
  }
}

注：provide 和 inject 綁定并不是可響應(yīng)的。即父組件的name變化后，子組件不會(huì)跟著變。

如果想要實(shí)現(xiàn) provide 和 inject 數(shù)據(jù)響應(yīng)，有兩種方法：

provide 祖先組件的實(shí)例，然后在子孫組件中注入依賴(lài)，這樣就可以在后代組件中直接修改祖先組件的實(shí)例的屬性，不過(guò)這種方法有個(gè)缺點(diǎn)就是這個(gè)實(shí)例上掛載很多沒(méi)有必要的東西比如 props，methods

// 父組件　
<div>
      <button @click="changeName">修改姓名</button>
      <child-b />
</div>
<script>
    ......
    data() {
        return {
            name: "Jack"
        };
    },
    provide() {
        return {
            parentObj: this //提供祖先組件的實(shí)例
        };
    },
    methods: {
        changeName() {
            this.name = 'Lily'
        }
    }
</script>

后代組件中取值：　　

<template>
　　<div class="border2">
　　　　<P>姓名：{{parentObj.name}}</P>
　　</div>
</template>
<script>
　　export default {
　　　　inject: {
　　　　　　parentObj: {
　　　　　　　　default: () => ({})
　　　　　　}
　　　　} // 或者inject: ['parentObj']
　　};
</script>

注：這種方式在函數(shù)式組件中用的比較多。函數(shù)式組件，即無(wú)狀態(tài)(沒(méi)有響應(yīng)式數(shù)據(jù))，無(wú)實(shí)例化(沒(méi)有 this 上下文)，內(nèi)部也沒(méi)有任何生命周期處理方法，所以渲染性能高，比較適合依賴(lài)外部數(shù)據(jù)傳遞而變化的組件。

父子通信： 父向子傳遞數(shù)據(jù)是通過(guò) props，子向父是通過(guò) $emit；通過(guò) $parent / $children 通信；$ref 也可以訪問(wèn)組件實(shí)例；provide / inject ；$attrs / $listeners；

兄弟通信：EventBus；Vuex；

跨級(jí)通信：EventBus；Vuex；provide / inject ；$attrs / $listeners；

感謝各位的閱讀！關(guān)于“vue組件之間相互傳值的方式有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！