vue--非父子組件之間的傳值

一個項目都有一個根組件 App.vue 

一個根組件下面可能會有多個自組件，例如：Hello.vue 和 Header.vue

Hello.vue 和 Header.vue 就是兄弟組件，那么這兩個兄弟組件之間又是如何傳值的呢？

一個項目都有一個根組件 App.vue

一個根組件下面可能會有多個自組件，例如：Hello.vue 和 Header.vue

Hello.vue 和 Header.vue 就是兄弟組件，那么這兩個兄弟組件之間又是如何傳值的呢？

// 第一步：引入個空的vue實例
import Vue from 'vue'
// 第二步：實例化這個空的vue
var vueEvent = new Vue();
// 第三步：將它暴露出去
export default vueEvent;

接下來：Hello是父組件，下面有兩個：Header.vue組件和News.vue組件：

<template>
  <div id="Hello">
    {{title}}
    <v-header></v-header>
    <v-news></v-news>
  </div>  
</template>
<script>
import Header from './Header.vue';
import News from './News.vue';
export default {
  name: 'Hello',
  data () {
    return {
      title:'我是Hello組件'
    }
  },
  methods:{
    run(){},
  },
  components:{
    'v-header':Header,
    'v-news':News,
  }
}
</script>

News.vue進行廣播

<template>
  <div id="News">
    {{title}}
    <input type="button" value="廣播" @click="run()">
  </div>  
</template>
<script>
import vueEvent from '../model/vueEvent.js';
export default {
  name: 'Header',
  data () {
    return {
      title:'我是News組件'
    }
  },
  methods:{
    run(){
        //進行廣播
        vueEvent.$emit('toHeader',this.title);
    },
  }
}
</script>

Header.vue進行接收

<template>
  <div id="Header">
    {{title}}
  </div>  
</template>
<script>
import vueEvent from '../model/vueEvent.js';
export default {
  name: 'Header',
  data () {
    return {
      title:'我是Header組件'
    }
  },
  methods:{
    run(){},
  },
  mounted(){
    //加載的時候就要進行接收
    vueEvent.$on('toHeader',function(data){
      console.log(data);
    })
  }
}
</script>