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>