Vue組件之間的通信方式詳細(xì)講解

第Vue組件之間的通信方式詳細(xì)講解目錄前言一、父級(jí)傳數(shù)據(jù)給子級(jí)1、傳輸固定的具體數(shù)據(jù)2、動(dòng)態(tài)語(yǔ)法3、子組件調(diào)用父組件二、子級(jí)傳數(shù)據(jù)給父級(jí)1、使用自定義事件2、$refs的使用3、同級(jí)別組價(jià)以及任意組件之間的數(shù)據(jù)傳遞

前言

在前面，我們已經(jīng)了解了vue的組件以及vue組件之間的層級(jí)關(guān)系，這個(gè)在博主的往期博客，感興趣的可以往前挪，地址是：

1、vue組件

2、vue組件的層級(jí)關(guān)系

本文主要編寫記錄的是，組件之間的通信的模式以及通信的方式，我們的組件之間只能調(diào)用自己的屬性和自己的方法，不能調(diào)用其他組件的屬性以及方法，不過(guò)就是調(diào)用的話，那就是要用到數(shù)據(jù)通信，那樣才能調(diào)用該組件的屬性和方法。

我們的vue組件含有的最突出的是跨組件的數(shù)據(jù)流、自定義的事件通信以及構(gòu)建工具集成的。

一、父級(jí)傳數(shù)據(jù)給子級(jí)

1、傳輸固定的具體數(shù)據(jù)

我們通過(guò)一個(gè)代碼實(shí)例了解，父組件傳遞具體的數(shù)據(jù)給到子組件。

代碼實(shí)例：

!DOCTYPEhtml

htmllang="en"

head

title層級(jí)關(guān)系/title

/head

body

divid="app"

childmsg="**大學(xué)"/child

/div

scriptsrc="/vue/2.2.2/vue.min.js"/script

script

Vponent('child',{

props:['msg'],

template:

`h1{{msg}}學(xué)生教務(wù)系統(tǒng)/h1`

varvm=newVue({

el:"#app",

/script

/body

/html

運(yùn)行結(jié)果：

我們可以看到一個(gè)這樣的界面，當(dāng)在child組件通過(guò)props：[msg]定義了一個(gè)屬性msg，根組件就會(huì)調(diào)用child組件，將屬性msg里面的**大學(xué)，把這個(gè)數(shù)據(jù)傳給child組件，所以這個(gè)組件才能顯示出來(lái)，因?yàn)檫@個(gè)值是固定的且具體的值，不能被改變的，所以這種方法又稱為字面量傳值。

2、動(dòng)態(tài)語(yǔ)法

動(dòng)態(tài)語(yǔ)法其實(shí)很簡(jiǎn)單，就類似于使用v-bind將html的特性綁定到一個(gè)表達(dá)式中，可以使用v-bind將動(dòng)態(tài)的props綁定到父級(jí)組件的這些數(shù)據(jù)上面。當(dāng)父級(jí)組件的數(shù)據(jù)發(fā)生變化的時(shí)候，就將這一些變化發(fā)送到子組件當(dāng)中。這個(gè)不難理解，我們還是通過(guò)一些代碼來(lái)了解一下：

代碼實(shí)例：

!DOCTYPEhtml

htmllang="en"

head

title組件之間的傳遞/title

/head

body

divid="app"

childv-bind:msg='stage':open='open'/child

/div

scriptsrc="/vue/2.2.2/vue.min.js"/script

script

Vponent('child',{

template:

divh1{{msg}}學(xué)生教務(wù)系統(tǒng)/h1

h2v-show='open'放假了！進(jìn)不了！?。?h2/div`,

props:['msg','open'],

varvm=newVue({

el:"#app",

data:{

stage:"放假",

open:true

/script

/body

/html

運(yùn)行結(jié)果：

我們可以看到child組件當(dāng)中，已經(jīng)定義了msg和open兩個(gè)教務(wù)系統(tǒng)的屬性，在父組件里面已經(jīng)使用了child組件，當(dāng)中使用了v-bind指令來(lái)綁定我們這兩個(gè)屬性，用來(lái)接收來(lái)自父組件的數(shù)據(jù)。我們組件之間可以是props指定驗(yàn)證要求，這個(gè)時(shí)候props得到的值是一個(gè)對(duì)象的值。

3、子組件調(diào)用父組件

這里我們可以解釋到父級(jí)組件調(diào)用我們子組件的時(shí)候通過(guò)綁定事件的時(shí)候，將這個(gè)方法傳遞給子組件，可以將子組件中通過(guò)$emit觸發(fā)這個(gè)事件。這個(gè)還是不難理解，我們可以通過(guò)代碼的方式來(lái)了解：

代碼實(shí)例：

!DOCTYPEhtml

htmllang="en"

head

title組件之間的傳遞/title

/head

body

divid="app"

childv-on:fmethod="show"/child

p{{msg}}/p

/div

templateid="n1"

divbutton@click="myclick"調(diào)用父組件/button/div

/template

scriptsrc="/vue/2.2.2/vue.min.js"/script

script

varclild={

template:"#n1",

methods:{

myclick(){this.$emit('fmethod');}

varvm=newVue({

el:"#app",

data:{msg:""},

methods:{

show(){this.msg="這里是父級(jí)組件的方法";}

components:{child:clild}

/script

/body

/html

運(yùn)行結(jié)果：當(dāng)我們點(diǎn)擊的時(shí)候就可以使得父級(jí)組件的show方法被執(zhí)行的。如下：

二、子級(jí)傳數(shù)據(jù)給父級(jí)

1、使用自定義事件

當(dāng)父級(jí)組件調(diào)用子級(jí)組件的時(shí)候，我們先通過(guò)一個(gè)v-on指令進(jìn)行一個(gè)自定義事件的綁定，在子組件當(dāng)中可以通過(guò)$emit將這個(gè)函數(shù)事件觸發(fā)，然后再父級(jí)組件中定義的處理函數(shù)的方法，通過(guò)這樣的傳遞參數(shù)將數(shù)據(jù)傳給父級(jí)組件，這個(gè)還是很簡(jiǎn)單可以理解的，我們通過(guò)代碼示例的方式來(lái)了解我們這一個(gè)定義，

實(shí)例代碼：

!DOCTYPEhtml

htmllang="en"

head

title組件之間的傳遞/title

/head

body

divid="app"

childv-on:fmethod="show"/child

p{{msg}}/p

/div

templateid="n1"

divbutton@click="myclick"調(diào)用父組件的方法/button/div

/template

scriptsrc="/vue/2.2.2/vue.min.js"/script

script

varclild={

template:"#n1",

data:function(){return{msg:"這里是來(lái)自子級(jí)組件的數(shù)據(jù)"}},

methods:{

myclick(){this.$emit('fmethod',this.msg);}

varvm=newVue({

el:"#app",

data:{msg:""},

methods:{

show(data){this.msg=data;}

components:{child:clild}

/script

/body

/html

運(yùn)行結(jié)果：

當(dāng)單擊按鈕的時(shí)候，執(zhí)行myclick的方法，這個(gè)方法中的this.$emit這個(gè)命令就會(huì)觸發(fā)fmethod這個(gè)事件，進(jìn)行調(diào)用父組件里面show顯示這個(gè)方法，再使得this.msg作為實(shí)參傳進(jìn)去。如下：

2、$refs的使用

這個(gè)概念的時(shí)候，我們能知道在調(diào)用子級(jí)組件的時(shí)候使用ref屬性，通過(guò)$refs得到ref的屬性值對(duì)應(yīng)組件的實(shí)例，得到后父級(jí)組件就可以使用子組件，從而控制子組件的數(shù)據(jù)，同時(shí)還可以得到子組件的方法，概念很簡(jiǎn)單，我們可以通過(guò)代碼方式了解：

實(shí)例代碼：

!DOCTYPEhtml

htmllang="en"

head

title組件之間的傳遞/title

/head

body

divid="app"

p{{msg}}/pbuttonv-on:click="My_click()"訪問(wèn)子組件的數(shù)據(jù)和方法/button

childref="child1"/child

/div

scriptsrc="/vue/2.2.2/vue.min.js"/script

script

varclild={

template:"#n1",

data:function(){return{msg:"這里是來(lái)自子級(jí)組件的數(shù)據(jù)"}},

methods:{

myclick(){this.$emit('fmethod',this.msg);}

varvm=newVue({

el:"#app",

data:{msg:"根組件data"},

methods:{

My_click(){

console.log(this.$emit.child.msg1);

this.$refs.child.show("已經(jīng)被調(diào)用");

components:{

child:{

template:'p{{msg1}}/p',

data:function(){

return{msg1:"子組件數(shù)據(jù)"}

methods:{

show(data){

console.log("子組件方法"+data)

/script

/body

/html

運(yùn)行結(jié)果：

3、同級(jí)別組價(jià)以及任意組件之間的數(shù)據(jù)傳遞

我們已經(jīng)知道了父子組件之前的數(shù)據(jù)傳遞，那么現(xiàn)在還得了解一下同級(jí)組件，時(shí)間總線可以用于任何組件之間的通信，以便用于來(lái)用解決跨級(jí)別傳遞的方法。

我們?cè)诔绦虼a中，要先定義事件總線，在使用事件總線的傳遞數(shù)據(jù)的兩個(gè)組件中，一個(gè)組件可以使用偵聽時(shí)間；另一個(gè)組件又可以使用觸發(fā)事件。我們還是可以通過(guò)一個(gè)實(shí)例代碼了解一下：

實(shí)例代碼：

!DOCTYPEhtml

htmllang="en"

head

title組件之間的傳遞/title

/head

body

divid="app"

component-one/component-one

component-two/component-two

/div

templateid="n1"

div

我是哥哥，想要獲取到弟弟的數(shù)據(jù):{{msg1}}

/div

/template

templateid="n2"

div

我是弟弟

button@click="send"把弟弟的數(shù)據(jù)傳給哥哥/button

/div

/template

scriptsrc="/vue/2.2.2/vue.min.js"/script

script

varbus=newVue({});

varvm=newVue({

el:"#app",

components:{

"component-one":{

template:'#n1',

data(){

return{msg1:""}

mounted(){