在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'
    })
}