vue常用组件间的通信方式(prop、自定义事件、全局事件总线)

一、父子间

1. prop(父组件向子组件)

父组件中：用冒号在子组件中绑定数据user

<template>
  <div>
    <Calendar :user="users"></Calendar>
  </div>
</template>

<script>
import Calendar from './components/calendar.vue'

export default {
  name: 'Calendar ',
  components: {
    Calendar,
  },
  data() {
    return {
     users: 'user'
    }
  },

 子组件中：用prop接受user

<template>
  <div>
   
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
prop:{ 'user': String}

　　2.自定义事件（子组件向父组件）

子组件中用emit触发事件

首先在子组件中需要传递数据的地方写下emit事件

<template>
  <div>
   
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
created() {
　　let a = 13;
　　this.$emit('getChildData'，a)// getChildData为事件名，a为要传的数据，要传的数据可以为多项，用逗号隔开
}

 然后在父组件中定义事件和方法：

<template>
  <div>
    <Calendar :user="users" @getChildData="getData"></Calendar>
  </div>
</template>

<script>
import Calendar from './components/calendar.vue'

export default {
  name: 'Calendar ',
  components: {
    Calendar,
  },
  data() {
    return {
     users: 'user'
    },
methods: {
     getData(data){　　//data为传入的数据，假如传入数据为多个，此时data参数也为多个，用逗号隔开
        console.log(data); // 13
    }
}
  },    

 

　　3.全局事件总线（用于任意组件间通信）

首先要安装全局事件总线，全局事件总线安装在main.js文件中

new Vue({
   render: h =>h(app),
   beforeCreate(){
       Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm    
   }  
   ... 
}).$mount('#app')

 使用事件总线：首先创建两个组件A和B，A把data传给B

组件A：

methods: {
  senddata() {
    this.$bus.$emit('data',666)//data为事件名，666为要传的数据
  }
}

 组件B：

mountes() {
  this.$bus.$on('data', (data) => {
    console.log('我是B组件，收到了数据', data) //666 
  })
}

beforeDestroy() {
  this.$bus.$off('data')//解绑当前组件所用到的事件
}

 也可以事件回调写在methods中：

methods() {
  demo(data) { ... }
}
mountes() {
  this.$bus.$on('data',this.demo})
}

beforeDestroy() {
  this.$bus.$off('data')//解绑当前组件所用到的事件
}

 　　

　　4.