Vue組件之間的通信方式詳細(xì)講解
前言
在前面，我們已經(jīng)了解了vue的組件以及vue組件之間的層級(jí)關(guān)系，這個(gè)在博主的往期博客，感興趣的可以往前挪，地址是：
1、vue組件
本文主要編寫(xiě)記錄的是，組件之間的通信的模式以及通信的方式，我們的組件之間只能調(diào)用自己的屬性和自己的方法，不能調(diào)用其他組件的屬性以及方法，不過(guò)就是調(diào)用的話(huà)，那就是要用到數(shù)據(jù)通信，那樣才能調(diào)用該組件的屬性和方法。
我們的vue組件含有的最突出的是跨組件的數(shù)據(jù)流、自定義的事件通信以及構(gòu)建工具集成的。
一、父級(jí)傳數(shù)據(jù)給子級(jí)
1、傳輸固定的具體數(shù)據(jù)
我們通過(guò)一個(gè)代碼實(shí)例了解，父組件傳遞具體的數(shù)據(jù)給到子組件。
代碼實(shí)例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>層級(jí)關(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>運(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è)值是固定的且具體的值，不能被改變的，所以這種方法又稱(chēng)為字面量傳值。
2、動(dòng)態(tài)語(yǔ)法
動(dòng)態(tài)語(yǔ)法其實(shí)很簡(jiǎn)單，就類(lèi)似于使用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í)例：
<!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'>放假了！進(jìn)不了?。?！</h2></div>`,
props:['msg','open'],
});
var vm = new Vue({
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í)例：
<!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="這里是父級(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í)例代碼：
<!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:"這里是來(lái)自子級(jí)組件的數(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>運(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í)例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title>組件之間的傳遞</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p><button v-on:click="My_click()">訪(fǎng)問(wèn)子組件的數(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:"這里是來(lái)自子級(jí)組件的數(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>運(yùn)行結(jié)果：
3、同級(jí)別組價(jià)以及任意組件之間的數(shù)據(jù)傳遞
我們已經(jīng)知道了父子組件之前的數(shù)據(jù)傳遞，那么現(xiàn)在還得了解一下同級(jí)組件，時(shí)間總線(xiàn)可以用于任何組件之間的通信，以便用于來(lái)用解決跨級(jí)別傳遞的方法。
我們?cè)诔绦虼a中，要先定義事件總線(xiàn)，在使用事件總線(xiàn)的傳遞數(shù)據(jù)的兩個(gè)組件中，一個(gè)組件可以使用偵聽(tīng)時(shí)間；另一個(gè)組件又可以使用觸發(fā)事件。我們還是可以通過(guò)一個(gè)實(shí)例代碼了解一下：
實(shí)例代碼：
<!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>運(yùn)行結(jié)果：?jiǎn)螕舭粹o就可以把弟弟（組件）里面數(shù)據(jù)傳給到哥哥（組件）。
到此這篇關(guān)于Vue組件之間的通信方式詳細(xì)講解的文章就介紹到這了,更多相關(guān)Vue組件通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-image-crop基于Vue的移動(dòng)端圖片裁剪組件示例
這篇文章主要介紹了vue-image-crop基于Vue的移動(dòng)端圖片裁剪組件示例,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了Nuxt的路由動(dòng)畫(huà)效果案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue.js內(nèi)置組件之keep-alive組件使用
keep-alive是Vue.js的一個(gè)內(nèi)置組件。這篇文章主要介紹了vue.js內(nèi)置組件之keep-alive組件使用,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了在vue中使用?jquery?的兩種方法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
插件功能開(kāi)發(fā)完成后，若需要發(fā)布到公共組件庫(kù)中（例如：npmjs），需要對(duì)插件進(jìn)行打包并發(fā)布，這篇文章主要介紹了Vue插件打包與發(fā)布的方法示例，感興趣的小伙伴們可以參考一下2018-08-08
淺析Vue中權(quán)限管理的實(shí)現(xiàn)
在前端開(kāi)發(fā)中,權(quán)限管理是一項(xiàng)至關(guān)重要的任務(wù),本教程將深入探討如何在?Vue.js?項(xiàng)目中實(shí)施權(quán)限管理,并詳細(xì)講解如何實(shí)現(xiàn)到按鈕級(jí)別的細(xì)粒度控制,希望對(duì)大家有所幫助2024-11-11
VSCode使React?Vue代碼調(diào)試變得更爽
這篇文章主要為大家介紹了VSCode使React?Vue代碼調(diào)試變得更爽的使用方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
使用vue2.0創(chuàng)建的項(xiàng)目的步驟方法
這篇文章主要介紹了使用vue2.0創(chuàng)建的項(xiàng)目的步驟方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)懸浮球效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue監(jiān)聽(tīng)事件實(shí)現(xiàn)計(jì)數(shù)點(diǎn)擊依次增加的方法
今天小編就為大家分享一篇Vue監(jiān)聽(tīng)事件實(shí)現(xiàn)計(jì)數(shù)點(diǎn)擊依次增加的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09