vue父子组件传值

一:父子组件传值
1、Child.vue的中创建props,然后创建一个名为message的属性
.在App.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值
在这里插入图片描述

2、在app.vue中我们可以对message的值进行v-bind动态绑定
在这里插入图片描述
3、此时浏览器中

在这里插入图片描述

父组件向子组件传值成功
总结一下:
子组件在props中创建一个属性,用以接收父组件传过来的值
父组件中注册子组件
在子组件标签中添加子组件props中创建的属性
把需要传给子组件的值赋给该属性

二:子向父组件传值
1.在子组件中创建一个按钮,给按钮绑定一个点击事件在这里插入图片描述
2、在响应该点击事件的函数中使用$emit来触发一个自定义事件,并传递一个参数在这里插入图片描述
3、在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法
在这里插入图片描述
总结一下:

子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法
在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值