只看一例,就能明白Vue父子组件如何通信

我们假如当前的父子组件如下(name属性为 ‘Parent’ 的是父组件,为 ‘Child’ 的是子组件)
在这里插入图片描述
在这里插入图片描述
1.父向子传递数据
父向子传递数据主要是通过子组件的props属性来实现,在子组件props声明的属性,在父组件中直接绑定该属性则能实现父向子传递数据
需要注意的是:
a.props可以是一个数组,也可以是一个对象
b.当props是一个对象的时候,可以对里面的属性进行相关验证,比如类型检测type,是否必须required,以及默认值default
c.props里属性的值是不能更改的,也就是说只能get值,却不能set值,否则控制台会发出警告,原因在于:父向子传递的数据是单向数据,vue这样做的目的在于防止子组件的更改可能对父组件造成不可预测的影响
d.如果要使用到props里面的值,可以在computed计算属性里面实现相关的逻辑

2.子向父传递数据
子向父传递数据是通过自定义事件来实现。在子组件中通过this.$emit(‘自定义事件名’, ‘要向父组件传递的值’)来发送值,在父组件中直接监听子组件中的自定义事件,父组件则可以定义一个本地方法来接受传递过来的值

3.还要一种操作,父子组件虽然在数据上没有发生直接的交换,但是可以在某种程度上实现父子组件流程上的控制:父组件通过refs来获取到子组件的实例,那么父组件则可以在需要的操作节点上实现对子组件的相应的控制

4.关于.sync修饰符
也许在某些情况下,我们需要实现数据的双向绑定,那么此时,在子组件中可以显试地通过update:page(上图例子),在父组件中通过.sync修饰符来实现,这样做就明确了新赋值的意图,以免造成父子组件之间数据的混乱

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值