vue父组件与子组件之间传值

1、父组件像子组件传值:v-bind进行绑定:(自定义属性)

在这里插入图片描述

父组件

其中counts是自定义属性,它的值是传给子组件的

在这里插入图片描述

子组件

子组件通过props属性,counts是父组件传过来的值
在这里插入图片描述

2、子组件向父组件传值(自定义事件)

在这里插入图片描述

子组件

一、input标签中绑定了一个事件change,当输入框中的值发生变化的时候,就会调用这个事件的方法countChange()
在这里插入图片描述
二、通过第19行代码把input标签中的动元素的value值拿到了,refs是ref事件给后面加追了一个s,这是一种用法
在这里插入图片描述
三、现在要做的就是把lasterValue值传给父组件,那这个方法就是在触发函数中定义一个事件valueUpdate
这样的话,如果有谁对这个事件感兴趣,它就会监听这个事件,在监听过程中进行一些代码逻辑处理
在这里插入图片描述

四、那现在对事件感兴趣的肯定就是父组件中的相关标签了,所以在numbox标签中进行监听valueUpdate事件,当点击事件发生的话,它里面的方法会得到回调
在这里插入图片描述
五、传值
当这个关系打通之后,我们可以为事件附带一些参数,那这个参数便会传递给父组件中监听该事件的那个标签的函数。
子组件:
在这里插入图片描述
父组件
这样的话,父组件就拿到子组件的值了
在这里插入图片描述
可以使用这个值
在这里插入图片描述
在这里插入图片描述

最后,知识点:在视图中用的所有值都要在data()方法的return中定义一下。当

知识点2:图中划横线的三个是同一个东西,这告诉我不仅{{ }}里边的插值要在data()方法里定义,标签里这么写的值同样要定义
另外,value是***子组件***中传过来的
在这里插入图片描述

  • 3
    点赞
  • 37
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中,组件可以通过props属性将数据传递给子组件组件可以在子组件上使用v-model指令来实现双向数据绑定。具体步骤如下: 1. 在组件中,使用v-model指令将组件的数据绑定到子组件上。例如,可以使用:value属性将组件的数据传递给子组件,然后使用@input事件监听子组件的值变化并更新组件的数据。代码示例:\[2\] 2. 在子组件中,通过props属性接收组件传递的值。可以在props中定义一个名为value的属性,用于接收组件传递的值。代码示例:\[2\] 通过以上步骤,组件就可以将数据传递给子组件,并且在子组件中修改数据后,也能够将修改后的值传递回组件。这样,组件就可以使用子组件传递的值进行相应的操作了。 #### 引用[.reference_title] - *1* *3* [vue组件与子组件之间传值](https://blog.csdn.net/weixin_42855400/article/details/123022695)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue组件传值的方法总结](https://blog.csdn.net/qq_45337939/article/details/119763894)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值