父子通信流程图：
- 父组件通过
props将数据传递给子组件 - 子组件利用
$emit通知父组件修改更新
父组件传递子组件
注意点
但是需要注意的是，通过props传递的数据是只读状态的，也就是说，我们不能去修改这个值。
注意：props是只读的，如果直接对props中的数据进行修改，Vue就会发出警告。如果需要对props进行修改，就把props中的内容复制一份到data中，然后修改data中的数据。
子组件传递父组件
子组件利用$emit通知父组件，进行修改更新
效果如下：
说白了就是子组件通过$emit去定义一个监听事件，并且携带需要修改的数据传递到父组件中，父组件触发了这个事件，随之做相应的操作。
什么是prop
- Prop定义：组件上注册的一些自定义属性
- Prop作用：向子组件传递数据
特点：
- 可以传递任意数量的prop
- 可以传递任意类型的prop
由于prop的特性，使得prop也具有了一定的危险性，在组件的通信过程中，如果传递的数据并不是某个子组件具体需要的值，那么就会导致子组件的某些突发情况，正因为如此，此时可以通过 props校验 去完成。
props校验
作用：为组件的prop指定验证要求，不符合要求，可以在控制台错误提示
语法：
- 类型校验
- 非空校验
- 默认值
- 自定义校验
props:{
username:{
type:String, // 类型校验
default:'张三', // 默认值
require:true, // 非空校验
// 自定义校验
validator(value){
if(value.length<=0 || value.length>=10){
// 不放行
return false
}else{
// 放行
return true;
}
}
},
age:{},
isSingle:{},
car:{},
hobby:{}
}
prop 和 data 的区别
共同点：都可以给组件提供数据。
区别：
- data的数据是自己的，可以修改
- prop的数据是外部的，不能直接修改，要遵循单向数据流
其实对于子组件修改属性有两种方式：
个人认为
- 第一是 父组件通过
:xxx="xxx"的方式传递给子组件，子组件通过this.$emit去通知父组件，虽然父组件通过监听去实现数据的修改 - 第二是 子组件通过自身的data去拷贝一份父组件传递过来的prop属性
总而言之，谁的数据，谁负责去修改
非父子通信
- 通过provide & inject 或 eventbus
eventbus
作用：非父子组件，进行简易消息传递。复杂场景还是使用vuex
步骤：
- 1.创建一个都能访问到的事件总线（空Vue 实例）-> utils/EventBus.js
import Vue from 'vue'
const Bus = new Vue()
export default Bus
- 2.A组件（接收方） ，监听Bus实例的事件
created(){
<!--相当于这个 bus组件 监听了 sendMsg 这个事件 -->
Bus.$on('sendMsg',(msg)=>{
this.msg = msg
})
}
- 3.B组件（发送方），触发Bus实例的事件
Bus.$emit('sendMsg',"xxxxx消息")
那么，接收方A ，就会收到这个消息了
图解形式：
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)
}
}
.sync 修饰符
作用：可以实现子组件与父组件数据的双向绑定，简化代码
特点：prop属性名，可以自定义，非固定为value
场景：封装弹窗类的基础组件，visible属性，true显示 false隐藏
父组件使用：
<BaseDialog :visible.sync = 'isSshow'/>
// 等价 采用上面的即可
<BaseDialog
:visible='isShow'
@update:visible='isShow = $event'/>
子组件使用：
props:{visible:Boolean}
xxx(){this.$emit('update:visible',false)}
代码：
通用方案
- vuex