第Vue常見(jiàn)組件間通信方案及典型應(yīng)用場(chǎng)景詳解目錄什么是組件通信1、父子組件通信場(chǎng)景2、兄弟組件通信場(chǎng)景3、根組件和后代組件通信場(chǎng)景4、插槽通信場(chǎng)景5無(wú)直接關(guān)系的組件通信場(chǎng)景6大型項(xiàng)目中的復(fù)雜組件通信場(chǎng)景-Vuex狀態(tài)管理7其他的一些組件通信方案總結(jié)

什么是組件通信

所謂組件通信，就是組件之間的數(shù)據(jù)交互，也就是把一個(gè)組件A里面的數(shù)據(jù)傳遞到另一個(gè)組件B，并能夠讓組件B根據(jù)這個(gè)數(shù)據(jù)更新界面。

在Vue中，可用的通信方案有很多，下面給大家描述幾個(gè)常用的組件通信方案及其典型的應(yīng)用場(chǎng)景。

1、父子組件通信場(chǎng)景

父子組件通信是最典型的組件通信場(chǎng)景，沒(méi)有之一，他們之間通信主要使用自定義屬性或者ref。

第一種是自定義屬性,使用較為廣泛，在子組件中使用props選項(xiàng)進(jìn)行接收,子組件向父組件回傳數(shù)據(jù)，使用自定義事件，在子組件中使用$emit()方法觸發(fā)執(zhí)行，并回傳數(shù)據(jù)給父組件。

//定義組件h1-box

Vponent("h1-box",{

//通過(guò)props設(shè)置自定義屬性title接收組件外傳值

props:["title"],

//通過(guò)emits設(shè)置自定義事件向外部發(fā)送事件

emits:['give'],

methods:{

clickHandler(){

//通過(guò)$emit()方法觸發(fā)執(zhí)行把當(dāng)前組件數(shù)據(jù)帶出去

this.$emit('give',{name:'lucy'})

mounted(){

//通過(guò)this.title可以獲取外部傳入組件的值

console.log(this.title);

第二種使用ref實(shí)現(xiàn)通信。我們知道，使用ref可以快速訪(fǎng)問(wèn)一個(gè)組件實(shí)例對(duì)象及其內(nèi)部的數(shù)據(jù)和方法。這樣的話(huà)，在父組件中借助refs可以訪(fǎng)問(wèn)子級(jí)組件的數(shù)據(jù)，還可以借助refs可以訪(fǎng)問(wèn)子級(jí)組件的數(shù)據(jù)，還可以借助refs可以訪(fǎng)問(wèn)子級(jí)組件的數(shù)據(jù)，還可以借助refs調(diào)用子級(jí)組件中的方法，并傳遞事件參數(shù)給子級(jí)組件。當(dāng)然需要注意的是，在Vue開(kāi)發(fā)中，應(yīng)該盡量減少對(duì)ref的使用。

divid="app"

!--組件--

sonref="son"/son

/div

newVue({

el:"#app",

mounted(){

//獲取到組件實(shí)例，就可以任意操作組件實(shí)例

console.log(this.$refs.son);

letvm2=this.$refs.son;

//修改son組件的響應(yīng)式數(shù)據(jù)msg

vm2.msg="sz2111";

//調(diào)用son組件的changeMsg方法

vm2.changeMsg("sz2116");

components:{

//定義組件son

son:{

data(){

return{

msg:"sz2114",

methods:{

changeMsg(val){

this.msg=val;

template:`h1helloworld/h1`,

2、兄弟組件通信場(chǎng)景

這種場(chǎng)景使用狀態(tài)提升，這個(gè)概念源自React中的狀態(tài)提升思想。

所謂狀態(tài)提升，就是當(dāng)兩個(gè)組件希望共享一個(gè)數(shù)據(jù)時(shí)，我們可以找到這兩個(gè)組件最近的父級(jí)組件，把這個(gè)要被共享的變量定義在最近的父組件中去，再通過(guò)props向下傳遞給子組件們。需要注意的是，狀態(tài)提升適合應(yīng)用在簡(jiǎn)單的兄弟組件之間通信。當(dāng)遇到較為復(fù)雜的組件關(guān)系時(shí)，使用狀態(tài)提升就顯得麻煩了。

上圖圖中如果想點(diǎn)擊Font按鈕改變主題字體大小,也就是Title和Font兩個(gè)組件字體大小都改變。

如果Title和Font組件都維護(hù)自己組件的狀態(tài)數(shù)據(jù)就不太好傳遞數(shù)據(jù)，就可以他他們的狀態(tài)存儲(chǔ)到共同的父組件狀態(tài)中，也就是狀態(tài)提升。

!--父組件app--

divid="app"

!--子組件font--

font:font="fontSize"/font

!--子組件title--

title:font="fontSize"/title

/div

//父組件

newVue({

el:'#app',

data:{

//把子組件共同需要的數(shù)據(jù)存儲(chǔ)在共同的父組件上

fontSize:12

//子組件

Vponent('font',{

//通過(guò)自定義屬性接受父組件傳入的值

props:['font'],

template:`div:style="{fontSize:font+'px'}"hello/div`

//子組件

Vponent('title',{

//通過(guò)自定義屬性接受父組件傳入的值

props:['font'],

template:`div:style="{fontSize:font+'px'}"world/div`

3、根組件和后代組件通信場(chǎng)景

這種場(chǎng)景主要是provide/inject。使用provide選項(xiàng)，可以在任意組件中注入數(shù)據(jù)；使用inject選項(xiàng)，可以在后代組件中接受父級(jí)組件注入的數(shù)據(jù)。需要注意的是，provide/inject這種通信方案是沒(méi)有響應(yīng)式的，即父組件注入的數(shù)據(jù)發(fā)生變化時(shí)，后代組件不會(huì)自動(dòng)更新

上圖在祖先組件通過(guò)provide傳入的數(shù)據(jù)，在后代的所有組件中都可以通過(guò)inject獲取到。

下面是一個(gè)通過(guò)provide/inject傳值的例子

divid="app"

three/three

/div

//根組件

newVue({

el:"#app",

//provide用于在一個(gè)vue實(shí)例里面給后面的子孫實(shí)例傳遞數(shù)據(jù)

provide:function(){

return{

a:100,

c:300,

d:this.obj,

//定義組件one

Vponent("one",{

//inject用于在子孫組件中接收祖先通過(guò)provide傳入的變量c

inject:["a"],

template:`

div

h1我是one組件---{{a}}/h1

/div

//定義組件two，里面有子組件one

Vponent("two",{

//inject用于在子孫組件中接收祖先通過(guò)provide傳入的變量c，并重名成myC

inject:{

myC:"c",

template:`

div

h1我是two組件---{{myC}}/h1

one/one

/div

//定義組件three,里面有子組件two

Vponent("three",{

//inject用于在子孫組件中接收祖先通過(guò)provide傳入的變量b，并重名成bbb，同時(shí)設(shè)置默認(rèn)值299999

inject:{

bbb:{

from:"b",

default:299999,

template:`

div

h1我是three組件---{{bbb}}/h1

two/two

/div

4、插槽通信場(chǎng)景

在封裝組件時(shí)，可以為組件添加自定義屬性。使用這個(gè)組件時(shí)，在父級(jí)組件中使用#slotName=scope指令可以接收到子組件插槽傳遞過(guò)來(lái)的數(shù)據(jù)。ElementUI中的Table表格、VantUI中的Tabbar組件，都用到了插槽通信。

divid="app"

child

template#abc

h1sz2114/h1

h2sz2115/h2

h3sz2116/h3

/template

template#cindy

h1sz2014/h1

h2sz2015/h2

h3sz2016/h3

/template

/child

/div

//全局組件

Vponent("child",{

template:`

div

slotname='cindy'/slot

h1helloworld/h1

slotname='abc'/slot

/div

letvm=newVue({

el:"#app",

5無(wú)直接關(guān)系的組件通信場(chǎng)景

在沒(méi)有直接關(guān)聯(lián)的組件之間通信可以使用事件總線(xiàn)。事件總線(xiàn)是一種基于訂閱發(fā)布模式而設(shè)計(jì)的通信方案，在任意組件中訂閱指定頻道后，都能收到該頻道上的消息

。事件總線(xiàn)，它的強(qiáng)大之處在于：它是一種一對(duì)多的通信方案，還是一種多頻道的通信方案，非常強(qiáng)大。

divid="app"

inputtype="text"v-model="duanxin1"/

button@click="clickHandler"給老師發(fā)消息/button

/div

//中央事件總線(xiàn):類(lèi)似一個(gè)事件對(duì)象

//就像一個(gè)電信局

varbus=newVue();

//每個(gè)人就收短信都需要一個(gè)號(hào)碼(事件名)

//想要接收短信要先去電信辦個(gè)卡--注冊(cè)一個(gè)號(hào)碼

bus.$on("cyrevent",function(data){

console.log("短信內(nèi)容是");

console.log(data);

newVue({

el:"#app",

data(){

return{

duanxin1:"",

methods:{

clickHandler(){

//別人想給我發(fā)消息

bus.$emit("cyrevent",this.duanxin1);

6大型項(xiàng)目中的復(fù)雜組件通信場(chǎng)景-Vuex狀態(tài)管理

Vuex狀態(tài)管理是借助狀態(tài)管理工具，可以實(shí)現(xiàn)任意組件之間的數(shù)據(jù)通信。Vuex提供了state、mutations等接口，可以方便地實(shí)現(xiàn)任意未知關(guān)系的組件之間的數(shù)據(jù)交互。因此，我們經(jīng)常稱(chēng)Vuex是Vue開(kāi)發(fā)中的終極通信方案。終極的意思，不是說(shuō)它可以隨意地替代其它通信方案，而是說(shuō)Vuex很好用，能夠清晰地管理數(shù)據(jù)流。

上圖是vuex官方網(wǎng)站的工作流程圖，特別形象。

7其他的一些組件通信方案

上面說(shuō)到的是比較常用的組件通信方式，還有一些方式是上面通信方法不能使用的替代手段。

第一個(gè)是:$parent/$children，借助這兩個(gè)API，可以實(shí)現(xiàn)在組件樹(shù)之間任意穿梭。我們?cè)诋?dāng)前組件的作用域中，可以訪(fǎng)問(wèn)到任意其它組件的內(nèi)部數(shù)據(jù)，并調(diào)用它的方法。因此，這也是一種可用的通信方案。

第二個(gè)是:$attrs/$listeners。使用$attrs可以訪(fǎng)問(wèn)到父組件傳遞過(guò)來(lái)的自定義屬性（除class和style外），使用$listene