当前位置: 首页 > news >正文

vue子传父的一种新方法:this.$emit(‘input‘, value)可实现实时向父组件传值

今天要说的就是利用v-model和this.$emit(‘input’,value)实现子传父。
众所周知,v-model是给input绑定,方便对表单的双向绑定。
其实,v-model是个语法糖,具体案例如下所示。

<input v-model="inputValue">相当于
<input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value">在自定义组件中
<my-component v-model="inputValue"></my-component>相当于
<my-component v-bind:value="inputValue" v-on:input="inputValue = argument[0]">
</my-component>这个时候,inputValue接受的值就是input事件的回调函数的第一个参数,
所以在自定义组件中,要实现数据绑定,还需要$emit去触发input的事件。
this.$emit('input', value)//这个是在子组件中调用的
其实通过this.$emit('input', value)已经实现了子传父

我们今天所说的是自定义组件实时子传父,请继续看下面代码:

在父组件中调用子组件
<my-component v-model="inputValue"></my-component>子组件
watch: {// sonVal是子组件的一个变量值,当他变化的时候就会触发handler将新值传给父组件的inputValuesonVal: {handler (newVal, oldVal) {this.$emit('input', newVal)},deep: true,}
}
http://www.lryc.cn/news/106451.html

相关文章:

  • 【Web】web
  • css中的bfc是什么?
  • 【前端知识】React 基础巩固(四十四)——其他Hooks(useContext、useReducer、useCallback)
  • 华为云hcip核心知识笔记(数据库服务规划)
  • 【有趣的】关于Map的一些小测试
  • 【MATLAB第63期】基于MATLAB的改进敏感性分析方法IPCC,拥挤距离与皮尔逊系数法结合实现回归与分类预测
  • AI 绘画Stable Diffusion 研究(二)sd模型ControlNet1.1 介绍与安装
  • 接口参数设计原则
  • 网络安全防护利器:SK5代理与IP代理的技术对比
  • IDEA删除本地git仓库、创建本地git仓库、关联其他仓库并上传
  • JavaEE简单示例——在使用Tomcat的时候可能出现的一些报错
  • webrtc的线程模型
  • 数据库备份还原-mysqldump、mydumper、xtrabackup、压缩
  • 【黑马程序员前端】JavaScript入门到精通--20230801
  • 100道Java多线程面试题(上)
  • web开发中的安全和防御入门——csp (content-security-policy内容安全策略)
  • 定了!全国2023下半年软考(高级、中级、初级)报名时间汇总
  • Linux下安装配置Redis
  • 深度学习(33)——CycleGAN(2)
  • WeakMap and WeakSet(弱映射和弱集合)
  • 【Vue3基础】组件保持存活、异步加载组件
  • 在 3ds Max 中使用相机映射将静止图像转换为实时素材
  • 如何使用GIL解决Python多线程性能瓶颈
  • k8s概念-深入pod
  • Web服务器实验案例
  • 预警 项目经验BUG
  • 基于RFID技术的猪舍门读卡器
  • 亚马逊店铺的回款周期是多久?
  • 剑指offer19.正则表达式
  • Mac Navicat 16试用脚本