在vue-cli中組件通信的方法
更新時(shí)間：2017年12月16日 09:46:32 作者：a2774206
本篇文章主要介紹了在vue-cli中組件通信的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
本文介紹了在vue-cli中組件通信的方法，分享給大家。具體如下：
vue組件之間的通信包括三種：
1.父組件向子組件通信
2.子組件向父組件通信
3.同級(jí)組件之間的通信
一.父?jìng)髯咏M件通信
拿app.vue當(dāng)父組件，content.vue當(dāng)子組件
1.父組件中導(dǎo)入子組件（子組件導(dǎo)出）
import contents from './components/content';
2.在父組件中注冊(cè)子組件
data() {
return {
test:'0'
};
},
components:{
'v-header':headers,
'v-content':contents
}
3.子組件通過(guò)props來(lái)接收數(shù)據(jù)
<v-content :childs='test'></v-content>
二.子與父組件通信
子組件：
<template>
<div @click="down()"></div>
</template>
methods: {
down() {
this.$emit('down','null'); //主動(dòng)觸發(fā)down方法，'null'為向父組件傳遞的數(shù)據(jù)
}
}
父組件：
<div>
<child @down="changes" :test="test"></child> //監(jiān)聽(tīng)子組件觸發(fā)的down事件,然后調(diào)用changes方法
</div>
methods: {
changes(msg) {
this.test= test;
}
}
二.非父子組件通信
//把a(bǔ)當(dāng)作一個(gè)中轉(zhuǎn)站 var a = new Vue();
組件1觸發(fā)：
<div @click="eve"></div>
methods:{
eve(){
a.$emit("change",'null')
}
}
組件2接收：
<div></div>
created(){
a.$on('change',()=>{
this.msg = 'null'
})
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Element Input組件分析小結(jié)，詳細(xì)的介紹了Input組件的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
Vue腳手架安裝時(shí)遇到的無(wú)法安裝問(wèn)題詳解
開(kāi)發(fā)中遇到bug是在正常不過(guò)了,而程序也基本都是bug堆里爬出來(lái)的,下面這篇文章主要給大家介紹了關(guān)于Vue腳手架安裝時(shí)遇到的無(wú)法安裝問(wèn)題的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue如何將html內(nèi)容轉(zhuǎn)為圖片并下載到本地
這篇文章主要介紹了vue如何將html內(nèi)容轉(zhuǎn)為圖片并下載到本地，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
解決vue的變量在settimeout內(nèi)部效果失效的問(wèn)題
今天小編就為大家分享一篇解決vue的變量在settimeout內(nèi)部效果失效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue實(shí)現(xiàn)吸頂、錨點(diǎn)和滾動(dòng)高亮按鈕效果
這篇文章主要介紹了vue實(shí)現(xiàn)一個(gè)簡(jiǎn)單的吸頂、錨點(diǎn)和滾動(dòng)高亮按鈕效果,需要的朋友可以參考下2019-10-10
vue前端實(shí)現(xiàn)導(dǎo)出頁(yè)面為word的兩種方法代碼
在前端開(kāi)發(fā)中我們常常需要將頁(yè)面頁(yè)面為word文件,這篇文章主要給大家介紹了關(guān)于vue前端實(shí)現(xiàn)導(dǎo)出頁(yè)面為word的兩種方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
下面小編就為大家分享一篇vue綁定的點(diǎn)擊事件阻止冒泡的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要介紹了Vue 嵌套路由使用總結(jié),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端的左右滑動(dòng)事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
Vue.js框架是什么，為什么要選擇它？這篇文章為大家介紹目前前端技術(shù)使用的趨勢(shì)，以及Vue.js的優(yōu)點(diǎn)和適用場(chǎng)景等，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10