VUE子父组件以及兄弟组件之间的传值

一、父传子
自定义属性

 父组件:使用v-bind传值
 <child :message="parentMsg"></child>
 
 **子组件:通过props接收传过来的值**
 props:['message']

二、子传父
自定义事件

 子组件:通过$emit发送数据
 <button @click="sendMsgToParent">向父组件传值</button>
 methods:{
    sendMsgToParent:function () {
        //第一个参数是发送的事件名称 第二个参数是发送的数据
        this.$emit("listenToChildEvent",'this message is from child')
    }
 }
 
父组件:通过发送的事件名称来获取
<child @listenToChildEvent="sendMsgFromChild"></child>
methods:{
    sendMsgFromChild:function (data) {
        console.log(data)
    }
 }

三、兄弟组件

2个组件都引入一个vue实例 bus.js 来实现传递

bus.js代码如下：

import Vue from 'vue';
export default new Vue;

兄弟one:通过$emit发送数据
<button @click="snedMsg">one像two传值</button>
methods:{
    snedMsg:function () {
        //第一个参数是发送的名称 第二个参数是发送的数据
         bus.$emit('userDefinedEvent','this message is from one')
     }
 }
兄弟two:通过$on监听内容
 mounted(){
      var self = this;
      bus.$on('userDefinedEvent',function (msg) {
          self.msg = msg
      })
  }