跨组件通信

props 和 `$emit`

父子组件通信用，props 传递数据给子组件，$emit触发父组件的事件，并且返回值

`$attrs` 和 `$listeners`

跨级组件通信用

$attrs：包含父作用域中所有不在 props 里声明的属性，class 和 style 除外，可通过 v-bind="$attrs" 传入组件内部
$listeners：包含父作用域中所有 v-on 事件监听器，带 .native 修饰器的除外，可通过 v-on="$listeners" 传入组件内部

中央事件总线 EventBus

非父子组件通信

新建一个 Vue 实例，此处称为中央事件总线，然后将其赋值给Vue.prototype.$EventBus，使得所有组件都能访问到
组件 A 定义一个触发全局的事件 globalEvent，并传递一个参数
this.$EventBus.$emit('globalEvent', value)
组件 B 监听全局事件 globalEvent，并在回调函数里执行一些逻辑处理
this.$EventBus.$on('globalEvent',(value)=>{ console.log(value); })

provide 和 inject

主要用于开发高阶插件/组件库时使用，不推荐用于普通应用程序，用法与 react 的 context 类似

在父组件中通过 provide 提供属性，然后在子组件中通过 inject 来注入变量，不论子组件多深，只要调用了 inject 就可以注入在 provide 提供的数据

// 父组件
date(){
    return{}
},
provide:{
    for:'text'
}
// 子组件
data(){
    return{
        message: this.for
    }
},
inject:['for']

`$parent` 和 `$children`

$parent就是父组件的实例对象，$children就是当前实例的直接子组件实例，该属性值是数组类型，且不保证顺序，也不是响应式

vuex

具体查看（解答）

refs

通过 this.$refs.xxx 拿到组件上面的所有方法和属性

.sync 修饰符

// 示例代码
<comp :foo.sync="bar"></comp>
// 会被扩展为
<comp :foo="bar" @update:foo="val => bar = val"></comp>
// 子组件更新 foo 值 this.$emit('update:foo', newValue)

# 跨组件通信

# props 和 $emit

# $attrs 和 $listeners

# 中央事件总线 EventBus

# provide 和 inject

# $parent 和 $children

# vuex

# refs

# .sync 修饰符