文章目录
什么是组件通信?
组件通信,就是指组件与组件之间的数据传递
- 组件的数据是独立的,无法直接访问其他组件的数据
- 想使用其他组件的数据,就需要组件通信
父子通信流程
- 父组件通过 props 将数据传递给子组件
- 子组件利用 $emit 通知父组件修改更新
props
Props 定义
组件上 注册的一些 自定义属性
Props 作用
-
向子组件传递数据
-
props接受的数据,只读,不可修改
-
props接收到的简单数据类型,不可修改
-
props接收到的复杂数据类型,可修改,vue也不会报错,但是不建议这样做
特点
- 可以 传递 任意数量 的prop
- 可以 传递 任意类型 的prop
数组写法
数组写法没有校验,所以不会在控制台报错
props: ['title','text', 'name']
对象写法(props校验)
作用:
- 为组件的 prop 指定验证要求,不符合要求,控制台就会有错误提示
- 帮助开发者,快速发现错误
简写只验证数据类型:
props: {
校验的属性名: 数据类型
}
完整写法,完整的验证:
props: {
校验的属性名: {
type: 数据类型, // Number String Boolean ...
required: true, // 是否必填
default: 默认值, // 默认值(未传值就使用默认值)
validator (value) {
// value接收的就是传过来的值
// 自定义校验逻辑
return 布尔值 // 返回true就代表通过验证
}
}
}
示例:
<script>
export default {
// 完整写法(类型、默认值、非空、自定义校验)
props: {
w: {
type: Number,
//required: true,
default: 0,
validator(val) {
// console.log(val)
if (val >= 100 || val <= 0) {
console.error('传入的范围必须是0-100之间')
return false
} else {
return true
}
},
},
},
}
</script>
props父向子传值
用props
父传子
- 给子组件以添加属性的方式传值
- 子组件内部通过props接收
- 模板中直接使用 props接收的值
在子组件中修改props
- 如果传过来的是简单数据类型,那么是无法修改的
- 如果传过来的是复杂数据类型,那么是可以修改的,但是不建议去修改
- 子组件如果要修改父组件传过来的数据的话,可以用
$emit
去触发父组件的自定义事件,让父组件自己去修改数据
$emit子向父传值
用props
子传父
- 父通过自定义属性将自己的方法传送出去
- 子通过props接受父传过来的方法
- 子通过调用接收过来的方法去传参的形式传数据
- 因为方法是在父亲身上,父亲因此接收到了数据
用$emit
子传父
- 给子组件绑定自定义事件,事件触发时调用来自父亲的回调函数
vm.$emit( eventName, […args] )
,eventName
为字符串类型,[…args]
可省略,或者传入多条数据- 在子组件内利用
$emit
触发子组件绑定的自定义事件,传入数据,进行修改更新
上图流程:
- 点击
button
,调用回调函数changeTitle
- 回调函数调用
$emit
方法 $emit
方法会去触发子组件绑定的自定义事件changeTitle
,同时传入参数- 子组件绑定的自定义事件
changeTitle
被触发后会调用回调函数handleChange
- 回调函数
handleChange
用接收到的参数去修改数据msg