父子通信

父 -> 子

子 -> 父

props 校验

props: {校验的属性名: {type: 类型,  // Number String Boolean ...required: true, // 是否必填default: 默认值, // 默认值validator (value) {// 自定义校验逻辑return 是否通过校验}}
},

• data 的数据是自己的 → 随便改
• prop 的数据是外部的 → 不能直接改，要遵循 单向数据流

非父子通信

事件总线 event bus

1. 创建一个都能访问的事件总线 （空Vue实例）

   import Vue from 'vue'
   const Bus = new Vue()
   export default Bus
   

2. A组件（接受方），监听Bus的 $on事件

   created () {Bus.$on('sendMsg', (msg) => {this.msg = msg})
   }
   

3. B组件（发送方），触发Bus的$emit事件

   Bus.$emit('sendMsg', '这是一个消息')
   

provide & inject

1. 父组件 provide提供数据

export default {provide () {return {// 普通类型【非响应式】color: this.color, // 复杂类型【响应式】userInfo: this.userInfo, }}
}

2.子/孙组件 inject获取数据

export default {inject: ['color','userInfo'],created () {console.log(this.color, this.userInfo)}
}

• provide提供的简单类型的数据不是响应式的，复杂类型数据是响应式。（推荐提供复杂类型数据）
• 子/孙组件通过inject获取的数据，不能在自身组件内修改