vue父子组件

父与子的交互问题,这里我用的是老师与学生。

老师(父组件)传学生(子组件)
1.先建立一个子组件。
在这里插入图片描述

2.给子组件定义一个值。
在这里插入图片描述

3.声明定义的这个值。

在这里插入图片描述
这里注意props与data同级
效果如图:
在这里插入图片描述
学生(子组件)传老师(父组件)
1.同样建立一个子组件。
2.写一个可以让他们两个组件通信的按钮,并且声明。
在这里插入图片描述
3.设置一个input的输入框,并且做一个双向绑定,并声明这个属性,这里注意声明在data内。
在这里插入图片描述
4.之后在建一个父组件。
5.引入这个子组件。
在这里插入图片描述
6.注意这两处一致。在这里插入图片描述
在这里插入图片描述
7.将子组件引入。
在这里插入图片描述
8.将子组件的值赋给父组件。
在这里插入图片描述
效果图如下:完成学生传老师。
在这里插入图片描述
同时老师也可以传学生。
在这里插入图片描述
就这样完成了双向传递。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值