vue組件之間通信實(shí)例總結(jié)(點(diǎn)贊功能)
本文實(shí)例講述了vue組件之間通信。分享給大家供大家參考，具體如下：
總結(jié)：
父組件--》子組件
①通過屬性
步驟1：
<son myName="michael" myPhone='123'></son> <son :myName="userList[0]"></son>
步驟2：
Vue.component('son',{
props:['myName','myPhone']
})
②通過$parent
直接在子組件中通過this.$parent得到調(diào)用子組件的父組件
子組件--》父組件
①events up
步驟1：在父組件中 調(diào)用子組件的時(shí)候 綁定一個(gè)自定義事件 和 對(duì)應(yīng)的處理函數(shù)
methods:{
recvMsg:function(msg){
//msg就是傳遞來的數(shù)據(jù)
}
}，
template:'
<son @customEvent="recvMsg"></son>
'
步驟2：在子組件中 把要發(fā)送的數(shù)據(jù)通過觸發(fā)自定義事件傳遞給父組件
this.$emit('customEvent',123)
②$refs
reference 引用
步驟1：在調(diào)用子組件的時(shí)候 可以指定ref屬性
<son ref='zhangsan'></son>
步驟2：通過$refs得到指定引用名稱對(duì)應(yīng)的組件實(shí)例
this.$refs.zhangsan
兄弟組件通信
步驟1：創(chuàng)建一個(gè)Vue的實(shí)例 作為事件綁定觸發(fā)的公共的對(duì)象
var bus = new Vue();
步驟2：在接收方的組件 綁定 自定義的事件
bus.$on('customEvent',function(msg){
//msg是通過事件傳遞來的數(shù)據(jù) (傳遞來的123)
});
步驟3：在發(fā)送方的組件 觸發(fā) 自定義的事件
bus.$emit('customEvent',123);
每日一練：
創(chuàng)建2個(gè)組件，main-component,son-component
視圖：
main-component 顯示一個(gè)按鈕
son-component 顯示一個(gè)p標(biāo)簽
功能：
main-component 定義一個(gè)變量count,初始化為0，將count傳遞給son-component,son-component接收到數(shù)據(jù)顯示在p標(biāo)簽中
main-component 在點(diǎn)擊按鈕時(shí)，實(shí)現(xiàn)對(duì)count的自增操作，要求son-component能夠?qū)崟r(shí)顯示count對(duì)應(yīng)的數(shù)據(jù)
son-component在接收到count之后，在count大于10的時(shí)候，將main-component的按鈕禁用掉
（參考：<button v-bind:disabled="!isValid">clickMe</button>）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>www.dbjr.com.cn 小練習(xí)</title>
<script src="https://cdn.bootcss.com/vue/2.0.1/vue.min.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<main-component></main-component>
</div>
<script>
/*
每日一練：
創(chuàng)建2個(gè)組件，main-component,son-component
視圖：
main-component 顯示一個(gè)按鈕
son-component 顯示一個(gè)p標(biāo)簽
功能：
main-component 定義一個(gè)變量count,初始化為0，將count傳遞給son-component,son-component接收到數(shù)據(jù)顯示在p標(biāo)簽中
main-component 在點(diǎn)擊按鈕時(shí)，實(shí)現(xiàn)對(duì)count的自增操作，要求son-component能夠?qū)崟r(shí)顯示count對(duì)應(yīng)的數(shù)據(jù)
son-component在接收到count之后，在count大于10的時(shí)候，將main-component的按鈕禁用掉
（參考：<button v-bind:disabled="!isValid">clickMe</button>）
*/
//創(chuàng)建父組件
Vue.component("main-component",{
data:function(){
return {
count:0,
isDisabled:true
}
},
methods:{
//點(diǎn)擊按鈕對(duì)count進(jìn)行自增
//并通過$emit觸發(fā)countAdd,并把count的值傳遞給子組件
//判斷count==10的時(shí)候讓按鈕禁用
countAdd:function(){
this.count++;
console.log("對(duì)數(shù)據(jù)進(jìn)行自增："+this.count);
this.$emit("countAdd",this.count);
}
},
template:`
<div>
<button @click="countAdd" v-bind:disabled="!isDisabled">點(diǎn)我</button>
<son-component v-bind:myCount="count"></son-component>
</div>
`
})
//創(chuàng)建子組件
Vue.component("son-component",{
//通過props接收父組件傳遞過來的值
props:["myCount"],
template:`
<div>
<p>{{myCount}}</p>
</div>
`,
//數(shù)據(jù)更新完成后判斷從父組件拿到的值
updated:function(){
if(this.myCount>10){
//子組件通過$parent直接獲取父組件的數(shù)據(jù)
this.$parent.isDisabled = false;
}
}
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試，可得到如下運(yùn)行效果：
感興趣的朋友還可以使用上述在線工具測(cè)試一下代碼的運(yùn)行效果。
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要介紹了vuex管理狀態(tài)倉庫使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
本篇文章主要介紹了Vue.js 2.0 如何使用axios，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)易跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了vue項(xiàng)目打包步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
vue實(shí)現(xiàn)簡(jiǎn)單無縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單無縫滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue create、vue webpack init創(chuàng)建vue項(xiàng)目產(chǎn)生的項(xiàng)目文件的區(qū)別
這篇文章主要介紹了vue create、vue webpack init創(chuàng)建vue項(xiàng)目產(chǎn)生的項(xiàng)目文件的區(qū)別及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue-router不允許導(dǎo)航到當(dāng)前位置(/path)錯(cuò)誤原因以及修復(fù)方式
本文主要介紹了Vue-router不允許導(dǎo)航到當(dāng)前位置(/path)錯(cuò)誤原因以及修復(fù)方式，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue列表循環(huán)從指定下標(biāo)開始的多種解決方案
這篇文章主要介紹了Vue列表循環(huán)從指定下標(biāo)開始的多種方案,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
vue toggle做一個(gè)點(diǎn)擊切換class(實(shí)例講解)
下面小編就為大家分享一篇使用vue toggle實(shí)現(xiàn)點(diǎn)擊切換class的示例。具有很好的參考價(jià)值。希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作
這篇文章主要介紹了Vue 樣式切換及三元判斷樣式關(guān)聯(lián)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08