詳解vue組件之間相互傳值的方式
概述
我們都知道 Vue 作為一個輕量級的前端框架，其核心就是組件化開發(fā)。Vue 就是由一個一個的組件構(gòu)成的，組件化是它的精髓，也是最強大的功能之一。而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用。
但在實際項目開發(fā)過程中，我們需要訪問其他組件的數(shù)據(jù)，這樣就就有了組件通信的問題。在 vue 中組件之間的關(guān)系有：父子，兄弟，隔代。針對不同的關(guān)系，怎么實現(xiàn)數(shù)據(jù)傳遞，就是接下來要講的。
一、父組件向子組件傳值
即父組件通過屬性的方式向子組件傳值，子組件通過 props 來接收。
在父組件的子組件標簽中綁定自定義屬性
// 父組件
<user-detail :myName="name" />
export default {
components: {
UserDetail
}
......
}
在子組件中使用props（可以是數(shù)組也可以是對象）接收即可?？梢詡鞫鄠€屬性。
// 子組件
export default {
props: ['myName']
}
/*
props: { myName: String } //這樣指定傳入的類型，如果類型不對會警告
props: { myName: [String, Number] } // 多個可能的類型
prosp: { myName: { type: String, requires: true } } //必填的的字符串
props: {
childMsg: {
type: Array,
default: () => []
}
} // default指定默認值
如果 props 驗證失敗，會在控制臺發(fā)出一個警告。
*/
子組件接收的父組件的值分為引用類型和普通類型兩種：
普通類型：字符串（String）、數(shù)字（Number）、布爾值（Boolean）、空（Null）
引用類型：數(shù)組（Array）、對象（Object）
基于 vue 的單向數(shù)據(jù)流，即組件之間的數(shù)據(jù)是單向流通的，子組件是不允許直接對父組件傳來的值進行修改的，所以應(yīng)該避免這種直接修改父組件傳過來的值的操作，否則控制臺會報錯。
如果傳過來的值是簡單數(shù)據(jù)類型，是可以在子組件中修改，也不會影響其他兄弟組件內(nèi)同樣調(diào)用了來自該父組件的值。
具體操作是可以先把傳過來的值重新賦值給data中的一個變量，然后再更改那個變量。
// 子組件
export default {
props: ['myName'],
data() {
return {
name : this.myName // 把傳過來的值賦值給新的變量
}
},
watch: {
myName(newVal) {
this.name = newVal //對父組件傳過來的值進行監(jiān)聽，如果改變也對子組件內(nèi)部的值進行改變
}
},
methods: {
changeName() {
this.name = 'Lily' // 這里修改的只是自己內(nèi)部的值，就不會報錯了
},
}
}
注：如果不使用 watch 來監(jiān)聽父組件傳遞的 myName 值，子組件中的 name 值是不會隨著父組件的 myName 值進行改變，因為 data 中 name: this.myName 僅僅只是定義了一個初始值。
如果引用類型的值，當在子組件中修改后，父組件的也會修改，因其數(shù)據(jù)是公用的，其他同樣引用了該值的子組件也會跟著被修改。可以理解成父組件傳遞給子組件的值，就相當于復(fù)制了一個副本，這個副本的指針還是指向父組件中的那個，即共享同一個引用。所以除非有特殊需要，否則不要輕易修改。
二、子組件向父組件傳值
1.子組件綁定一個事件，通過 this.$emit() 來觸發(fā)
在子組件中綁定一個事件，并給這個事件定義一個函數(shù)
// 子組件
<button @click="changeParentName">改變父組件的name</button>
export default {
methods: {
//子組件的事件
changeParentName: function() {
this.$emit('handleChange', 'Jack') // 觸發(fā)父組件中handleChange事件并傳參Jack
// 注：此處事件名稱與父組件中綁定的事件名稱要一致
}
}
}
在父組件中定義并綁定 handleChange 事件
// 父組件
<child @handleChange="changeName"></child>
methods: {
changeName(name) { // name形參是子組件中傳入的值Jack
this.name = name
}
}
2.通過 callback 函數(shù)
先在父組件中定義一個callback函數(shù)，并把 callback 函數(shù)傳過去
// 父組件
<child :callback="callback"></child>
methods: {
callback: function(name) {
this.name = name
}
}
在子組件中接收，并執(zhí)行 callback 函數(shù)
// 子組件
<button @click="callback('Jack')">改變父組件的name</button>
props: {
callback: Function,
}
3. 通過 $parent / $children 或 $refs 訪問組件實例
這兩種都是直接得到組件實例，使用后可以直接調(diào)用組件的方法或訪問數(shù)據(jù)。
// 子組件
export default {
data () {
return {
title: '子組件'
}
},
methods: {
sayHello () {
console.log('Hello');
}
}
}
// 父組件
<template>
<child ref="childRef" />
</template>
<script>
export default {
created () {
// 通過 $ref 來訪問子組件
console.log(this.$refs.childRef.title); // 子組件
this.$refs.childRef.sayHello(); // Hello
// 通過 $children 來調(diào)用子組件的方法
this.$children.sayHello(); // Hello
}
}
</script>
注：這種方式的組件通信不能跨級。
三、兄弟組件之間傳值
1. 還是通過 $emit 和 props 結(jié)合的方式
在父組件中給要傳值的兩個兄弟組件都綁定要傳的變量，并定義事件
// 父組件
<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) { // 判斷是否有值傳過來
return this.myName
}
return 'John' //沒有傳值的默認值
}
}
}
</script>
即：當子組件B 通過 $emit() 觸發(fā)了父組件的事件函數(shù) editName，改變了父組件的變量name 值，父組件又可以把改變了的值通過 props 傳遞給子組件A，從而實現(xiàn)兄弟組件間數(shù)據(jù)傳遞。
2.通過一個空 vue 實例
創(chuàng)建一個 EventBus.js 文件，并暴露一個 vue 實例
import Vue from 'Vue' export default new Vue()
在要傳值的文件里導(dǎo)入這個空 vue 實例，綁定事件并通過 $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 實例，通過 $on 監(jiān)聽回調(diào)，回調(diào)函數(shù)接收所有觸發(fā)事件時傳入的參數(shù)
import { EventBus } from "../EventBus.js"
export default {
data() {
return {
name: ''
}
},
created() {
EventBus.$on('editName', (name) => {
this.name = name
})
}
}
這種通過創(chuàng)建一個空的 vue 實例的方式，相當于創(chuàng)建了一個事件中心或者說是中轉(zhuǎn)站，用來傳遞和接收事件。這種方式同樣適用于任何組件間的通信，包括父子、兄弟、跨級，對于通信需求簡單的項目比較方便，但對于更復(fù)雜的情況，或者項目比較大時，可以使用 vue 提供的更復(fù)雜的狀態(tài)管理模式 Vuex 來進行處理。
四、多層父子組件通信
有時需要實現(xiàn)通信的兩個組件不是直接的父子組件，而是祖父和孫子，或者是跨越了更多層級的父子組件，這種時候就不可能由子組件一級一級的向上傳遞參數(shù)，特別是在組件層級比較深，嵌套比較多的情況下，需要傳遞的事件和屬性較多，會導(dǎo)致代碼很混亂。
這時就需要用到 vue 提供的更高階的方法：provide/inject。
這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時間里始終生效。
provide/inject：簡單來說就是在父組件中通過provider來提供變量，然后在子組件中通過inject來注入變量，不管組件層級有多深，在父組件生效的生命周期內(nèi)，這個變量就一直有效。
父組件：
export default {
provide: { // 它的作用就是將 **name** 這個變量提供給它的所有子組件。
name: 'Jack'
}
}
子組件：
export default {
inject: ['name'], // 注入了從父組件中提供的name變量
mounted () {
console.log(this.name); // Jack
}
}
注：provide 和 inject 綁定并不是可響應(yīng)的。即父組件的name變化后，子組件不會跟著變。
如果想要實現(xiàn) provide 和 inject 數(shù)據(jù)響應(yīng)，有兩種方法：
provide 祖先組件的實例，然后在子孫組件中注入依賴，這樣就可以在后代組件中直接修改祖先組件的實例的屬性，不過這種方法有個缺點就是這個實例上掛載很多沒有必要的東西比如 props，methods
// 父組件
<div>
<button @click="changeName">修改姓名</button>
<child-b />
</div>
<script>
......
data() {
return {
name: "Jack"
};
},
provide() {
return {
parentObj: this //提供祖先組件的實例
};
},
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ù)式組件，即無狀態(tài)(沒有響應(yīng)式數(shù)據(jù))，無實例化(沒有 this 上下文)，內(nèi)部也沒有任何生命周期處理方法，所以渲染性能高，比較適合依賴外部數(shù)據(jù)傳遞而變化的組件。
總結(jié)
父子通信： 父向子傳遞數(shù)據(jù)是通過 props，子向父是通過 $emit；通過 $parent / $children 通信；$ref 也可以訪問組件實例；provide / inject ；$attrs / $listeners；
兄弟通信：EventBus；Vuex；
跨級通信：EventBus；Vuex；provide / inject ；$attrs / $listeners；
以上就是詳解vue組件之間相互傳值的方式的詳細內(nèi)容，更多關(guān)于vue的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue-router的使用和出現(xiàn)空白頁,路由對象屬性詳解
今天小編就為大家分享一篇Vue-router的使用和出現(xiàn)空白頁,路由對象屬性詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue路由組件的緩存keep-alive和include屬性的具體使用
：瀏覽器頁面在進行切換時,原有的路由組件會被銷毀,通過緩存可以保存被切換的路由組件,本文主要介紹了Vue路由組件的緩存keep-alive和include屬性的具體使用,感興趣的可以了解一下2023-11-11
這篇文章主要為大家詳細介紹了Vue實現(xiàn)雙向數(shù)據(jù)綁定的方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
vue2?使用echarts實現(xiàn)地圖點擊進入下一層級+點擊空白處回退功能
這篇文章主要介紹了vue2?使用echarts實現(xiàn)地圖點擊進入下一層級+點擊空白處回退,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了Vue插件使用方法詳情分享，使用插件之前顯示定義，下文通過js插件定義展開詳細文章介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-03-03
vue2模擬vue-element-admin手寫角色權(quán)限的實現(xiàn)
本文主要介紹了vue2模擬vue-element-admin手寫角色權(quán)限的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要為大家詳細紹了vue2.0全局組件之pdf的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
Vue?ECharts實現(xiàn)機艙座位選擇展示功能代碼詳解
這篇文章主要介紹了Vue?ECharts實現(xiàn)機艙座位選擇展示,本文給大家分享一段簡短的代碼通過效果圖展示給大家介紹的非常明白，需要的朋友可以參考下2022-05-05
vue根據(jù)權(quán)限動態(tài)渲染按鈕、組件等的函數(shù)式組件實現(xiàn)
這篇文章主要介紹了vue根據(jù)權(quán)限動態(tài)渲染按鈕、組件等的函數(shù)式組件實現(xiàn)方式,具有很好的參考價值,希望杜大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了vue計算屬性想要傳入?yún)?shù)如何解決問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01