Vue组件间通信

• 前言

Vue一个完整的项目必然少不了组件间的通信，组件间的通信包括父子组件通信、兄弟组件通信；

1.父子组件通信

1.1 props 数据传递（父传子）

• 父组件

<template>
  <div>
    <Child :message="message" />
  </div>
</template>

<script>
import Child from "../components/Child.vue"
export default{
    data(){
        return{
            message:"我是父组件的内容"
        }
    },
    components:{
        Child
    }    
}
</script>

• 子组件

<template>
  <div>
      <p>{{ message }}</p>
  </div>
</template>

<script>
import Child from "../components/Child.vue"
export default{
    porps:{
        message:{
            type:String
        }
    }   
}
</script>

 1.2自定义事件（子传父）

•  子组件

<template>
  <div>
    <h3>Child</h3>
    <button @click="sendMessage">发送数据到parent</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      childInfo: "child中的数据"
    }
  },
  methods: {
    sendMessage () {
      this.$emit("onSend", this.childInfo)
    }
  }

}
</script>

•  父组件

• <template>
    <div>
      <h3>Parent</h3>
      <ChildCom1 @onEvent="messageHander" />
      <p>{{ childData1 }}</p>
    </div>
  </template>
  
  <script>
  import ChildCom1 from './ChildCom1.vue';
  export default {
    data () {
      return {
        childData1: '',
      }
    },
    components: {
      ChildCom1,
    },
    methods: {
      messageHander (data) {
        console.log(data)
        this.childData1 = data
      }
    }
  
  }
  </script>

2.同级组件通信

• 事件总线 EventBus

1. 首先在src文件夹下创建plugins/bus.js文件里声明事件总线函数

• //src/plugins/bus.js
  import Vue from "vue"
  
  const EventBus = new Vue();
  Object.defineProperties(Vue.prototype,{
      $bus:{
          get(){
              return EventBus
          }
      }
  })

  2.在main.js中

• Vue.prototype.$EventBus = new Vue()

 从组件A 向组件B传递数据

• 组件A 发送数据

<template>
  <div>
    <h3>Child</h3>
    <button @click="sendHander">发送数据</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: "测试数据"
    }
  },
  methods: {
    sendHander () {
      this.$EventBus.$emit("onMsg", this.msg)
    }
  }
}
</script>

• 组件B 接收数据

<template>
  <div>
    <h3>Child1</h3>
    <p>{{ mess }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      mess: ""
    }
  },
  mounted () {
    this.$EventBus.$on("onMsg", data => {
      console.log(data)
      this.mess = data
    })
  }
}
</script>

<style>
</style>