Vue組件之間的通信方式詳細講解
前言
在前面，我們已經(jīng)了解了vue的組件以及vue組件之間的層級關(guān)系，這個在博主的往期博客，感興趣的可以往前挪，地址是：
1、vue組件
本文主要編寫記錄的是，組件之間的通信的模式以及通信的方式，我們的組件之間只能調(diào)用自己的屬性和自己的方法，不能調(diào)用其他組件的屬性以及方法，不過就是調(diào)用的話，那就是要用到數(shù)據(jù)通信，那樣才能調(diào)用該組件的屬性和方法。
我們的vue組件含有的最突出的是跨組件的數(shù)據(jù)流、自定義的事件通信以及構(gòu)建工具集成的。
一、父級傳數(shù)據(jù)給子級
1、傳輸固定的具體數(shù)據(jù)
我們通過一個代碼實例了解，父組件傳遞具體的數(shù)據(jù)給到子組件。
代碼實例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>層級關(guān)系</title>
</head>
<body>
<div id="app">
<child msg="**大學(xué)"></child>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
Vue.component('child',{
props:['msg'],
template:
`<h1>{{msg}}學(xué)生教務(wù)系統(tǒng)</h1>`
});
var vm = new Vue({
el:"#app",
})
</script>
</body>
</html>運行結(jié)果：
我們可以看到一個這樣的界面，當(dāng)在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ù)上面。當(dāng)父級組件的數(shù)據(jù)發(fā)生變化的時候，就將這一些變化發(fā)送到子組件當(dāng)中。這個不難理解，我們還是通過一些代碼來了解一下：
代碼實例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>組件之間的傳遞</title>
</head>
<body>
<div id="app">
<child v-bind:msg='stage':open='open'></child>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
Vue.component('child',{
template:
<div><h1>{{msg}}學(xué)生教務(wù)系統(tǒng)</h1>
<h2 v-show='open'>放假了！進不了！??！</h2></div>`,
props:['msg','open'],
});
var vm = new Vue({
el:"#app",
data:{
stage:"放假",
open:true
}
})
</script>
</body>
</html>運行結(jié)果：
我們可以看到child組件當(dāng)中，已經(jīng)定義了msg和open兩個教務(wù)系統(tǒng)的屬性，在父組件里面已經(jīng)使用了child組件，當(dāng)中使用了v-bind指令來綁定我們這兩個屬性，用來接收來自父組件的數(shù)據(jù)。我們組件之間可以是props指定驗證要求，這個時候props得到的值是一個對象的值。
3、子組件調(diào)用父組件
這里我們可以解釋到父級組件調(diào)用我們子組件的時候通過綁定事件的時候，將這個方法傳遞給子組件，可以將子組件中通過$emit觸發(fā)這個事件。這個還是不難理解，我們可以通過代碼的方式來了解：
代碼實例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>組件之間的傳遞</title>
</head>
<body>
<div id="app">
<child v-on:fmethod="show"></child>
<p>{{msg}}</p>
</div>
<template id="n1">
<div><button @click="myclick">調(diào)用父組件</button></div>
</template>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var clild = {
template:"#n1",
methods:{
myclick(){this.$emit('fmethod');}
}
};
var vm = new Vue({
el:"#app",
data:{msg:""},
methods:{
show(){this.msg="這里是父級組件的方法";}
},
components:{child:clild}
})
</script>
</body>
</html>運行結(jié)果：當(dāng)我們點擊的時候就可以使得父級組件的show方法被執(zhí)行的。如下：
二、子級傳數(shù)據(jù)給父級
1、使用自定義事件
當(dāng)父級組件調(diào)用子級組件的時候，我們先通過一個v-on指令進行一個自定義事件的綁定，在子組件當(dāng)中可以通過$emit將這個函數(shù)事件觸發(fā)，然后再父級組件中定義的處理函數(shù)的方法，通過這樣的傳遞參數(shù)將數(shù)據(jù)傳給父級組件，這個還是很簡單可以理解的，我們通過代碼示例的方式來了解我們這一個定義，
實例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title>組件之間的傳遞</title>
</head>
<body>
<div id="app">
<child v-on:fmethod="show"></child>
<p>{{msg}}</p>
</div>
<template id="n1">
<div><button @click="myclick">調(diào)用父組件的方法</button></div>
</template>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var clild = {
template:"#n1",
data:function(){return {msg:"這里是來自子級組件的數(shù)據(jù)"}},
methods:{
myclick(){this.$emit('fmethod',this.msg);}
}
};
var vm = new Vue({
el:"#app",
data:{msg:""},
methods:{
show(data){this.msg=data;}
},
components:{child:clild}
})
</script>
</body>
</html>運行結(jié)果：
當(dāng)單擊按鈕的時候，執(zhí)行myclick的方法，這個方法中的this.$emit這個命令就會觸發(fā)fmethod這個事件，進行調(diào)用父組件里面show顯示這個方法，再使得this.msg作為實參傳進去。如下：
2、$refs的使用
這個概念的時候，我們能知道在調(diào)用子級組件的時候使用ref屬性，通過$refs得到ref的屬性值對應(yīng)組件的實例，得到后父級組件就可以使用子組件，從而控制子組件的數(shù)據(jù)，同時還可以得到子組件的方法，概念很簡單，我們可以通過代碼方式了解：
實例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title>組件之間的傳遞</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p><button v-on:click="My_click()">訪問子組件的數(shù)據(jù)和方法</button>
<child ref="child1"></child>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var clild = {
template:"#n1",
data:function(){return {msg:"這里是來自子級組件的數(shù)據(jù)"}},
methods:{
myclick(){this.$emit('fmethod',this.msg);}
}
};
var vm = new Vue({
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ā)事件。我們還是可以通過一個實例代碼了解一下：
實例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title>組件之間的傳遞</title>
</head>
<body>
<div id="app">
<component-one></component-one>
<component-two></component-two>
</div>
<template id="n1">
<div style="border: 1px solid blue;padding: 10px;margin: 10px;">
我是哥哥，想要獲取到弟弟的數(shù)據(jù):{{msg1}}
</div>
</template>
<template id="n2">
<div style="border: 1px solid blue;padding: 10px;margin: 10px;">
我是弟弟
<button @click="send">把弟弟的數(shù)據(jù)傳給哥哥</button>
</div>
</template>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var bus = new Vue({});
var vm = new Vue({
el:"#app",
components:{
"component-one":{
template:'#n1',
data(){
return {msg1:""}
},
mounted(){
bus.$on("data-transmit",msgs2=>{
this.msg1 = msgs2
})
},
},
"component-two":{
template:"#n2",
data(){return {msg2:"我是弟弟的數(shù)據(jù)"}},
methods:{
send(){
bus.$emit("data-transmit",this.msg2);
}
}
}
}
})
</script>
</body>
</html>運行結(jié)果：單擊按鈕就可以把弟弟（組件）里面數(shù)據(jù)傳給到哥哥（組件）。
到此這篇關(guān)于Vue組件之間的通信方式詳細講解的文章就介紹到這了,更多相關(guān)Vue組件通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
關(guān)于element?ui的菜單default-active默認選中的問題
這篇文章主要介紹了關(guān)于element?ui的菜單default-active默認選中的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue中使用echarts實現(xiàn)繪制人體動態(tài)圖
這篇文章主要為大家詳細介紹了Vue中如何使用echarts實現(xiàn)繪制人體動態(tài)圖,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
這篇文章主要介紹了Vue項目history模式下微信分享爬坑總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了vue如何封裝Axios的get、post請求，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vuejs2.0運用原生js實現(xiàn)簡單的拖拽元素功能示例
本篇文章主要介紹了vuejs2.0運用原生js實現(xiàn)簡單的拖拽元素功能示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-02-02
nuxt.js中間件實現(xiàn)攔截權(quán)限判斷的方法
這篇文章主要介紹了nuxt.js中間件實現(xiàn)攔截權(quán)限判斷的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要和大家一起聊一聊Vue.js過渡效果、CSS 過渡效果、純 JavaScript過渡效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
vue-axios同時請求多個接口 等所有接口全部加載完成再處理操作
這篇文章主要介紹了vue-axios同時請求多個接口 等所有接口全部加載完成再處理操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式
這篇文章主要介紹了vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要為大家詳細介紹了Vue實現(xiàn)文件上傳和下載功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09