vue 解決兄弟組件、跨組件深層次的通信操作
兄弟組件之間的通信同樣是在項(xiàng)目中經(jīng)常會(huì)遇到的組件間的通信問題之一, 這種問題的最根本方法就是： 把兄弟組件內(nèi)部的變量提升到一個(gè)中央倉庫。
借助父級組件鏈?zhǔn)浇换?/strong>
使子組件1 通過 $emit 通知父級, 父級再通過響應(yīng) 子組件1 的事件去觸發(fā)子組件2的事件，這樣的鏈?zhǔn)讲僮?，在子組件不多的時(shí)候，但是一個(gè)不錯(cuò)的解決方法
子組件1
<template>
<div>
<p @click="$emit('fromFirst','來自A組件')">first組件</p>
</div>
</template>
<script>
export default {
name: 'first'
}
</script>
子組件2
<template>
子組件2
<div>{{secondInfo}}</div>
</template>
<script>
export default {
name: 'second',
data() {
return {
this.secondInfo: null
}
},
created(){
this.$on('fromFather', (info) => {
this.secondInfo = info
})
}
}
</script>
父組件
<template>
<first @fromFirst='handleFromFirst' />
<second ref='second' />
</template>
<script>
import First from './first'
import Scond from './second'
export default {
components: {First, Second},
data() {
return {
this.secondInfo: null
}
},
methods:{
handleFromFirst(val) {
let second = this.$refs.second
second.$emit('fromFather', val)
}
}
}
</script>
子組件1 觸發(fā)父組件的 fromFirst 事件, 在事件中又觸發(fā)了子組件2的 fromFather事件，并將從子組件1 傳遞過來的參數(shù)傳遞給了該事件, 當(dāng)子組件2 執(zhí)行該事件的時(shí)候，將內(nèi)部的 secondInfo 改變。這就實(shí)現(xiàn)了一個(gè)兄弟組件的交互。
這個(gè)方式在 react 里面同樣也是適用的, 但是如果父組件內(nèi)包含了多個(gè)子組件并包含了復(fù)雜的邏輯， 有沒有更好的方式來解決這種方式呢。
大部分第一個(gè)想到的是 vuex， 當(dāng)然這在一個(gè)業(yè)務(wù)邏輯、數(shù)據(jù)復(fù)雜的項(xiàng)目中是一個(gè)很好的解決方法， 但是想象我們要編寫一個(gè)通用組件，這個(gè)組件可能被用到不同的項(xiàng)目中來， 如果使用 vuex 這就要求每一個(gè)使用這個(gè)組件的項(xiàng)目中都要使用 vuex, 這顯然是不好的。
借助中間文件，充當(dāng)中央倉庫
還好 ES6 的模塊機(jī)制天然就支持建立一個(gè)中央倉庫, 當(dāng) A 文件使用 import value from './b.js' 來引用 B 文件里面的 value 的時(shí)候, 這時(shí)就會(huì)賦值給 A 文件一個(gè) B 文件的 value 的 只讀引用, 當(dāng) B 文件里面的 value 的值發(fā)生變化的時(shí)候, A 文件里面的 value 也會(huì)跟著改變。
// lib.js
export let counter = 3;
export function incCounter() {
counter++;
}
// main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4
定義一個(gè)額外的實(shí)例進(jìn)行一個(gè)事件的中轉(zhuǎn)，對于ES6 模塊的運(yùn)行機(jī)制已經(jīng)有了一個(gè)講解，當(dāng)模塊內(nèi)部發(fā)生變化的時(shí)候，引入模塊的部分同樣會(huì)發(fā)生變化，當(dāng)又一個(gè)額外的實(shí)例對加載機(jī)制進(jìn)行引入進(jìn)行emit與emit與emit與on進(jìn)行綁定通信，能輕而易舉解決問題，通過b->a->c的模式直接過渡。
解決 vue 兄弟組件之間的通信我們同樣也可以使用中央倉庫的方式來實(shí)現(xiàn)。
// store.js 作為中央倉庫 import Vue from 'vue' export default new Vue()
通過 new 一個(gè) vue 的實(shí)例當(dāng)作兄弟組件交互的中央倉庫。
父級組件
<template>
<first/>
<second/>
</template>
<script>
import First from './first'
import Scond from './second'
export default {
components: {First, Second}
}
</script>
父組件只是引入子組件， 不再作為中央倉庫來過渡交互。
子組件1
<template>
<div @click='hanleClick'>子組件1</div>
</template>
<script>
import Store from './store'
export default {
name: 'first',
methods: {
handleClick() {
Store.$emit('fromFirst', '來自子組件1的傳值')
}
}
}
</script>
因?yàn)槲覀兊哪康木褪前?Store 作為一個(gè)中央倉庫，這里我們把 fromFirst 事件添加到了 Store 上面而不是當(dāng)前組件 this 上。
子組件2
<template>
子組件2
<div>{{secondInfo}}</div>
</template>
<script>
import Store from './store'
export default {
name: 'second',
data() {
return {
this.secondInfo: null
}
},
created(){
Store.$on('fromFirst', (info) => {
this.secondInfo = info
})
}
}
</script>
子組件2 里面同樣也是使用 Store 實(shí)例來監(jiān)聽 fromFirst 事件, 因?yàn)樽咏M件1和子組件2里面添加事件和監(jiān)聽事件的是同一個(gè)實(shí)例，根據(jù)我們在上文中分析的 ES6 中的情況, 當(dāng) Store 添加了 fromFirst 這個(gè)時(shí)間之后, Store實(shí)例的 $on 就可以監(jiān)聽到這個(gè)事件并執(zhí)行回調(diào)。
跨組件深層次交互
上面講的組件之間的關(guān)系是這樣的：
我們可以實(shí)現(xiàn) 子組件之間的交互， 但是如果我們遇到這種情況呢?
孫組件需要跟子組件3 進(jìn)行交互，還是使用上述的方法可以做到嗎？ 答案是肯定的，只要能夠使用同一個(gè)中央倉庫，那么不管什么層級的組件復(fù)雜度，都是可以實(shí)現(xiàn)兩者的交互的。
補(bǔ)充知識(shí)：Vue組件跨層級通信
正常組件間通信
父->子組件 是通過屬性傳遞
子->父組件 是通過this.$emit()傳遞
this.$emit()返回的是this,如果需要一些值 可使用callback方式傳遞
provide 和 inject
這對選項(xiàng)需要一起使用，以允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，
不論組件層次有多深，并在起上下游關(guān)系成立的時(shí)間里始終生效。
provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的。
然而，如果你傳入了一個(gè)可監(jiān)聽的對象，那么其對象的屬性還是可響應(yīng)的。
provide提供數(shù)據(jù),多層子組件 向上層尋找,只要找到 就不在向上層尋找了.
inject 向子組件注入數(shù)據(jù)
使用方式
第一種方式(傳遞對象,使用字符串?dāng)?shù)組接收)
// 父級組件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// 子組件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}
第二種方式(傳遞返回對象的函數(shù), 使用對象接收)
provide() {
return {
// 2.6.0 版本之前 通常傳遞this. 但這樣的話 會(huì)傳遞很多用不到的屬性
theme: {
color: 'xxx' //如果傳入可響應(yīng)的數(shù)據(jù),這里的屬性還是可響應(yīng)的
}
};
}
inject: {
//這里可以換成其它名字
theme: {
from: "theme", // 數(shù)據(jù)來源
default: () => ({}) //降級情況下使用的 value
//可以是 普通值
//可以是 對非原始值使用一個(gè)工廠方法
}
}
//正常子組件
this.theme //即可訪問
//子組件是函數(shù)式組件的使用方式
injections.theme.color
Vue.observable( object )
讓一個(gè)對象可響應(yīng)。Vue 內(nèi)部會(huì)用它來處理 data 函數(shù)返回的對象。
可以作為最小化的跨組件狀態(tài)存儲(chǔ)器，用于簡單的場景
提供數(shù)據(jù)可改為
provide() {
//這時(shí)提供的theme 則為可響應(yīng)的數(shù)據(jù)
this.theme = Vue.observable({
color: "blue"
});
return {
theme: this.theme
};
},
以上這篇vue 解決兄弟組件、跨組件深層次的通信操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于vue手動(dòng)實(shí)現(xiàn)一個(gè)日歷組件
這篇文章主要為大家詳細(xì)介紹了如何基于vue手動(dòng)實(shí)現(xiàn)一個(gè)日歷組件,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
說說Vue.js中的functional函數(shù)化組件的使用
這篇文章主要介紹了說說Vue.js中的functional函數(shù)化組件的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
動(dòng)畫詳解Vue3的Composition?Api
為讓大家更好的理解Vue3的Composition?Api本文采用了詳細(xì)的動(dòng)畫演繹，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
過濾器(Filters)是 vue 為開發(fā)者提供的功能，常用于文本的格式化，這篇文章主要介紹了如何在Vue中定義和調(diào)用過濾器,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了vue+echart實(shí)現(xiàn)雙柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue.js 如何添加全局常量或變量? 這是最近一個(gè)同事問的問題，發(fā)現(xiàn)很多朋友對這塊不熟悉，所以下面這篇文章主要給大家介紹了關(guān)于Vue中定義全局變量與常量的各種方式，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
在vue項(xiàng)目中env是全局配置文件,可以存儲(chǔ)不同環(huán)境下的變量,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目配置env的方法步驟,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
在Vue中使用deep深度選擇器修改element UI組件的樣式
這篇文章主要介紹了在Vue中使用deep深度選擇器修改element UI組件的樣式，本文分為兩種方法給大家介紹，在這小編比較推薦使用第二種使用 deep 深度選擇器，感興趣的朋友跟隨小編一起看看吧2022-12-12
基于node+vue實(shí)現(xiàn)簡單的WebSocket聊天功能
最近學(xué)習(xí)了一下websocket的即時(shí)通信，感覺非常的強(qiáng)大，這里我用node啟動(dòng)了一個(gè)服務(wù)進(jìn)行websocket鏈接，然后再vue的view里面進(jìn)行了鏈接，進(jìn)行通信，廢話不多說，直接上代碼吧2020-02-02
這篇文章主要為大家介紹了Vue多重文字描邊組件實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06