vue-cli中怎么實(shí)現(xiàn)組件通信

vue-cli中怎么實(shí)現(xiàn)組件通信，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

一.父?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'
  })
}

看完上述內(nèi)容，你們掌握vue-cli中怎么實(shí)現(xiàn)組件通信的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！