vue兄弟组件传值

<template>
  <div v-title :data-title="title">
    <div>car---兄弟组件传值</div>
    <div>下面显示的是brother1向brother2页面进行兄弟组件传值:</div>
    <brother1></brother1>
    <brother2></brother2>
  </div>
</template>

<script>
  // 在一个页面引入两兄弟组件
  import brother1 from '../components/brother1'
  import brother2 from '../components/brother2'
  export default {
    components:{brother1,brother2},
    data() {
      return {
        title:'页面名称'
      }
    },
    methods: {
      
    },
    created: function () {
    
    }
  }
</script>

组件brother1.vue页面代码：

<template>
  <div>
    <div @click="emitCar()">
    	兄弟页面brother1---------点击传值到brother2
    </div>
  </div>
</template>

<script>
  // 兄弟组件传值：在传值的组件中，引入brother
  import brother from '../api/brother.js';
  export default {
    data() {
      return {

      };
    },
    methods: {
      emitCar(){
        // 使用vm.$emit(‘事件名称’，’传入参数’)，作为发送消息的那一方

        // 第一种方法  引入brother.js
        brother.$emit('to-car','我是兄弟组件1要传的值')   // 向兄弟组件传值


        // 第二种方法  在main.js中定义  Vue.prototype.bus = new Vue();
        //由于bus是vue的一个实例，所以它有$emit这个方法,to-car就是一个随意的名字，可以改成aaa
        // this.bus.$emit('to-car','哈哈哈厈枯')
      },
    },
  };
</script>

组件brother2.vue页面代码：

<template>
  <div>
    兄弟页面brother2------兄弟组件1传值“{{selfContent}}”到兄弟组件2了
  </div>
</template>

<script>
  // 兄弟组件传值：在接收值的组件中，引入brother
  import brother from '../api/brother.js';
  export default {
    data() {
      return {
        selfContent:''
      }
    },
    methods: {
      
    },
    created: function () {
      // 第一种方法  引入brother.js
      // 使用vm.$on(‘事件名称’，’回调函数’)，作为接收消息的那一方。
      // 用$on事件来接收参数   并且调用了在a组件中出发的方法
      //兄弟组件传值：在created中开始监听，越早监听越好
      brother.$on('to-car',(data)=>{
        console.log(data)
        this.selfContent = data;
      })
		
	  // 第二种方法  在main.js中定义  Vue.prototype.bus = new Vue();
      // this.bus.$on("to-car",(data)=>{
      //   console.log(data)
      //   this.selfContent = data;
      // })
      
    },
  }
</script>

第一种方法----bother.js页面代码：

// 兄弟组件传值的中间bus
import Vue from 'vue'

var brother = new Vue();

export default brother

第二种方法----main.js页面代码：

// ****兄弟组件传值 vue bus可以实现不同组件间、不同页面间的通信
Vue.prototype.bus = new Vue();