vue组件传参

 1.v-bind传参

父组件

   <child-component :data-from-parent="parentData" />

子组件 

   export default {
     props: ['dataFromParent']
   }

2.$emit

 父组件

   <child-component @custom-event="handleChildData" />

子组件

   this.$emit('customEvent', data);

3.事件总线

   // 创建事件总线
   const eventBus = new Vue();

   // 发送组件
   eventBus.$emit('eventName', data);

   // 接收组件
   eventBus.$on('eventName', (data) => {
     // 处理数据
   });

4.通过 $parent 和 $children 属性(不推荐)

//获取子组件数据
this.$children

//获取父组件数据
this.$parent

5.vuex

6.ref

//获取所有ref
//如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
this.$refs

7.provide/inject

假设有两个组件： A.vue 和 B.vue，B 是 A 的子组件

// A.vue
export default {
  provide: {
    name: '浪里行舟'
  }
}
// B.vue
export default {
  inject: ['name'],
  mounted () {
    console.log(this.name);  // 浪里行舟
  }
}

//注意不是响应式

8.$attrs/$listeners

$attrs拿到父组件v-bind传给子组件，但没有被子组件props接收的值
$listeners   方法

9.总结

常见使用场景可以分为三类：

父子通信： 父向子传递数据是通过 props，子向父是通过 events（$emit）；
通过父链 / 子链也可以通信（$parent / $children）；
ref 也可以访问组件实例；provide / inject API；$attrs/$listeners
兄弟通信： Bus；Vuex
跨级通信： Bus；Vuex；provide / inject API、$attrs/$listeners