Vue組件之間的通信方式詳細講解
前言
在前面，我們已經了解了vue的組件以及vue組件之間的層級關系，這個在博主的往期博客，感興趣的可以往前挪，地址是：
1、vue組件
本文主要編寫記錄的是，組件之間的通信的模式以及通信的方式，我們的組件之間只能調用自己的屬性和自己的方法，不能調用其他組件的屬性以及方法，不過就是調用的話，那就是要用到數據通信，那樣才能調用該組件的屬性和方法。
我們的vue組件含有的最突出的是跨組件的數據流、自定義的事件通信以及構建工具集成的。
一、父級傳數據給子級
1、傳輸固定的具體數據
我們通過一個代碼實例了解，父組件傳遞具體的數據給到子組件。
代碼實例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>層級關系</title>
</head>
<body>
<div id="app">
<child msg="**大學"></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}}學生教務系統(tǒng)</h1>`
});
var vm = new Vue({
el:"#app",
})
</script>
</body>
</html>運行結果：
我們可以看到一個這樣的界面，當在child組件通過props：['msg']定義了一個屬性msg，根組件就會調用child組件，將屬性msg里面的‘**大學’，把這個數據傳給child組件，所以這個組件才能顯示出來，因為這個值是固定的且具體的值，不能被改變的，所以這種方法又稱為字面量傳值。
2、動態(tài)語法
動態(tài)語法其實很簡單，就類似于使用v-bind將html的特性綁定到一個表達式中，可以使用v-bind將動態(tài)的props綁定到父級組件的這些數據上面。當父級組件的數據發(fā)生變化的時候，就將這一些變化發(fā)送到子組件當中。這個不難理解，我們還是通過一些代碼來了解一下：
代碼實例：
<!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}}學生教務系統(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>運行結果：
我們可以看到child組件當中，已經定義了msg和open兩個教務系統(tǒng)的屬性，在父組件里面已經使用了child組件，當中使用了v-bind指令來綁定我們這兩個屬性，用來接收來自父組件的數據。我們組件之間可以是props指定驗證要求，這個時候props得到的值是一個對象的值。
3、子組件調用父組件
這里我們可以解釋到父級組件調用我們子組件的時候通過綁定事件的時候，將這個方法傳遞給子組件，可以將子組件中通過$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">調用父組件</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>運行結果：當我們點擊的時候就可以使得父級組件的show方法被執(zhí)行的。如下：
二、子級傳數據給父級
1、使用自定義事件
當父級組件調用子級組件的時候，我們先通過一個v-on指令進行一個自定義事件的綁定，在子組件當中可以通過$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">調用父組件的方法</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:"這里是來自子級組件的數據"}},
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>運行結果：
當單擊按鈕的時候，執(zhí)行myclick的方法，這個方法中的this.$emit這個命令就會觸發(fā)fmethod這個事件，進行調用父組件里面show顯示這個方法，再使得this.msg作為實參傳進去。如下：
2、$refs的使用
這個概念的時候，我們能知道在調用子級組件的時候使用ref屬性，通過$refs得到ref的屬性值對應組件的實例，得到后父級組件就可以使用子組件，從而控制子組件的數據，同時還可以得到子組件的方法，概念很簡單，我們可以通過代碼方式了解：
實例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title>組件之間的傳遞</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p><button v-on:click="My_click()">訪問子組件的數據和方法</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:"這里是來自子級組件的數據"}},
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("已經被調用");
}
},
components:{
child:{
template:'<p>{{msg1}}</p>',
data:function(){
return {msg1:"子組件數據"}
},
methods:{
show(data){
console.log("子組件方法"+data)
}
}
}
}
})
</script>
</body>
</html>運行結果：
3、同級別組價以及任意組件之間的數據傳遞
我們已經知道了父子組件之前的數據傳遞，那么現在還得了解一下同級組件，時間總線可以用于任何組件之間的通信，以便用于來用解決跨級別傳遞的方法。
我們在程序代碼中，要先定義事件總線，在使用事件總線的傳遞數據的兩個組件中，一個組件可以使用偵聽時間；另一個組件又可以使用觸發(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;">
我是哥哥，想要獲取到弟弟的數據:{{msg1}}
</div>
</template>
<template id="n2">
<div style="border: 1px solid blue;padding: 10px;margin: 10px;">
我是弟弟
<button @click="send">把弟弟的數據傳給哥哥</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:"我是弟弟的數據"}},
methods:{
send(){
bus.$emit("data-transmit",this.msg2);
}
}
}
}
})
</script>
</body>
</html>運行結果：單擊按鈕就可以把弟弟（組件）里面數據傳給到哥哥（組件）。
到此這篇關于Vue組件之間的通信方式詳細講解的文章就介紹到這了,更多相關Vue組件通信內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue-image-crop基于Vue的移動端圖片裁剪組件示例
這篇文章主要介紹了vue-image-crop基于Vue的移動端圖片裁剪組件示例,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Nuxt的路由動畫效果案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
keep-alive是Vue.js的一個內置組件。這篇文章主要介紹了vue.js內置組件之keep-alive組件使用,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了在vue中使用?jquery?的兩種方法小結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
插件功能開發(fā)完成后，若需要發(fā)布到公共組件庫中（例如：npmjs），需要對插件進行打包并發(fā)布，這篇文章主要介紹了Vue插件打包與發(fā)布的方法示例，感興趣的小伙伴們可以參考一下2018-08-08
在前端開發(fā)中,權限管理是一項至關重要的任務,本教程將深入探討如何在?Vue.js?項目中實施權限管理,并詳細講解如何實現到按鈕級別的細粒度控制,希望對大家有所幫助2024-11-11
這篇文章主要為大家介紹了VSCode使React?Vue代碼調試變得更爽的使用方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了使用vue2.0創(chuàng)建的項目的步驟方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了vue實現懸浮球效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
今天小編就為大家分享一篇Vue監(jiān)聽事件實現計數點擊依次增加的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09