溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vue-cli中怎么實現組件通信，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
一.父傳子組件通信
拿app.vue當父組件，content.vue當子組件
1.父組件中導入子組件（子組件導出）
import contents from './components/content';
2.在父組件中注冊子組件
data() {
return {
test:'0'
};
},
components:{
'v-header':headers,
'v-content':contents
}3.子組件通過props來接收數據
<v-content :childs='test'></v-content>
二.子與父組件通信
子組件：
<template>
<div @click="down()"></div>
</template>
methods: {
down() {
this.$emit('down','null'); //主動觸發down方法，'null'為向父組件傳遞的數據
}
}父組件：
<div>
<child @down="changes" :test="test"></child> //監聽子組件觸發的down事件,然后調用changes方法
</div>
methods: {
changes(msg) {
this.test= test;
}
}二.非父子組件通信
//把a當作一個中轉站 var a = new Vue();
組件1觸發：
<div @click="eve"></div>
methods:{
eve(){
a.$emit("change",'null')
}
}組件2接收：
<div></div>
created(){
a.$on('change',()=>{
this.msg = 'null'
})
}看完上述內容，你們掌握vue-cli中怎么實現組件通信的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
