Vue組件之間的通信方式詳細講解

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

前言

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

1、vue組件

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

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

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

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

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

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

代碼實例：

!DOCTYPEhtml

htmllang="en"

head

title層級關(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

運行結(jié)果：

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

2、動態(tài)語法

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

代碼實例：

!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'放假了！進不了?。?！/h2/div`,

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

varvm=newVue({

el:"#app",

data:{

stage:"放假",

open:true

/script

/body

/html

運行結(jié)果：

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

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

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

代碼實例：

!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="這里是父級組件的方法";}

components:{child:clild}

/script

/body

/html

運行結(jié)果：當我們點擊的時候就可以使得父級組件的show方法被執(zhí)行的。如下：

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

1、使用自定義事件

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

實例代碼：

!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:"這里是來自子級組件的數(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

運行結(jié)果：

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

2、$refs的使用

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

實例代碼：

!DOCTYPEhtml

htmllang="en"

head

title組件之間的傳遞/title

/head

body

divid="app"

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

childref="child1"/child

/div

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

script

varclild={

template:"#n1",

data:function(){return{msg:"這里是來自子級組件的數(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

運行結(jié)果：

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

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

我們在程序代碼中，要先定義事件總線，在使用事件總線的傳遞數(shù)據(jù)的兩個組件中，一個組件可以使用偵聽時間；另一個組件又可以使用觸發(fā)事件。我們還是可以通過一個實例代碼了解一下：

實例代碼：

!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(){