[TOC]

1、父组件通过属性值传递给子组件（子组件props接收），子组件$emit触发事件同时携带参数，父组件通过触发的事件绑定的回调函数传参接收子组件传递的参数。
父->子 属性值传递。
// Father.vue



子->父 子组件$emit触发事件，携带参数，父组件接收事件参数。
// Children.vue

// Father.vue


注意：属性的名字如果用短横线连接，传入子组件后props里的变量名自动变为小驼峰形式。 2、自定义组件使用v-model （2.2.0+ 新增）
vue默认的v-model常见于input标签上，v-model的本质也是语法糖。


对上面的input，v-model是value属性和input事件的简写。对raido、select、checkbox等，v-model都有对应的属性和事件。
![image.png](https://cdn.nlark.com/yuque/0/2021/png/20365003/1626011478671-b907c5bf-8c17-43c8-9bd3-2c7e3681462e.png#clientId=u32bf0656-fb55-4&from=paste&id=u2127e02b&margin=%5Bobject%20Object%5D&name=image.png&originHeight=159&originWidth=690&originalType=binary&ratio=1&size=71104&status=done&style=none&taskId=uaa593336-1d2c-4c79-90ad-276c101c007)
上图来自官网 [https://cn.vuejs.org/v2/guide/forms.html](https://cn.vuejs.org/v2/guide/forms.html) 如果需要自定义组件支持v-model，需要为自定义组件配置一个model对象。
// Children.vue


// Father.vue

v-model只支持一个属性的传递，如果自定义的组件想要同时支持多个属性的双向绑定，那么可以用下面一种方式。 （.sync） 3、.sync修饰符 （2.3.0+ 新增）
.sync修饰符也是语法糖



这种写法需要在子组件中$emit(“update:title”，value)来传值。 // Children.vue


// Father.vue

4、vuex
这个很常见，不说。

5、vue内置的高级属性 provide / inject （业务开发不推荐）
image.png
// ChildrenA.vue

// ChildrenE.vue


// ChildrenE.vue

官方建议将provide 和 inject用于高阶插件/组件库开发，并不推荐直接用于应用程序代码中。
业务开发优先考虑用vuex管理状态， 因为provide inject 会有一个类似冒泡的特性，数据源有可能在中间被“打断”，甚至是有可能被组件库中的组件打断，或者打断组件库中祖先元素的provide，不利于维护。

6、eventBus
主要用到两个方法，$emit发送消息，$on接收消息

// 发送消息
EventBus.$emit(channel: string, callback(payload1,…))
// 监听接收消息
EventBus.$on(channel: string, callback(payload1,…))

eventBus非全局使用
// event-bus.js
import Vue from ‘vue’
export const EventBus = new Vue()

// A.vue

// B.vue

全局使用
// main.js
Vue.prototype.$eventBus = new Vue()

任意组件的方法中通过
this.$eventBus.$emit(‘nameOfEvent’, payloadData);
this.$eventBus.$on(‘nameOfEvent’, callback(payloadData));