props / $emit

当需要在子组件里修改父组件值的时候使用 .sync 是 v-model 的语法糖

this.$emit('update:title', newValue)

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

// 使用 .sync 修饰符来缩写

<ChildComponent :title.sync="pageTitle" />

v-model 是上述语法糖，在组件上使用 v-model 相当于绑定 value prop 和 input 事件

<ChildComponent v-model="pageTitle" />

// 简写

<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

// 如果要改名需要 定义 model 对象
model: {
  prop: 'title', // 属性
  event: 'change' // 事件
},

$attrs / $listeners (Vue2.4新增)

祖孙组件通信 / 父子组件通信

$attrs 获取的是父组件中传入的非 Props 属性，可以通过 v-bind="$attrs" 传入子组件

$listeners 获取的是父组件中绑定的非原生事件，可以通过 v-on="$listeners" 传入子组件

原理: 通过中间组件当作桥梁进行祖孙传递。

provide / inject (Vue2.2.0新增)

祖孙组件通信 / 父子组件通信

祖或父组件中通过 provider 来提供数据，然后在子孙组件中通过 inject 拿到数据。

问题

provide 和 inject 绑定并不是可响应的。

所以下面的 祖父组件 的 name 如果改变了，孙组件 的 this.name 是不会改变的，仍然是 guor

// 祖父组件
export default {
  provide: {
    name: 'guor'
  }
}
// 孙组件
export default {
  inject: ['name'],
  mounted () {
    console.log(this.name) // guor
  }
}

解决方案

1. 把祖父组件中的 vue 实例传给 provide，然后子孙组件中直接引用祖先实例的属性。(不推荐)

2. 用vue2.6最新API Vue.observable 优化响应式 provide (推荐)

provide() {
  this.theme = Vue.observable({
    color: "blue"
  });
  return {
    theme: this.theme
  }; 
},

vuex

state

存放数据，全局唯一

mutation

修改数据，要修改 state 时，必须通过 mutation 修改。

actions

异步操作必须在 actions 里面执行，如果修改 state 也要在 actions 里面 调用 mutation 修改 state

commit

唯一能调用 mutation 的方式

dispatch

唯一能调用 action 的方式。例如组件中的 $store.dispatch

getters

获取 state 里数据的方法，类似于计算属性。

$parent / $children / $ref

ref

在普通的 DOM 元素上使用，指向当前 DOM 元素, 如果用在子组件上，就指向子组件实例。

$parent / $children

访问父 / 子实例

弊端: 两种方法的弊端是, 无法在跨级或兄弟间通信

eventBus（vue3废弃，原因$on，$off 和 $once 实例方法被移除）

通过一个空的Vue实例作为中央事件总线，用它来触发事件和监听事件，包括父子、兄弟、跨级

项目比较大时，可以选择更好的状态管理解决方案vuex