Vue2 父子组件某一属性的双向绑定

  • 原本:父组件使用props传值给孩子组件初始化,触发事件子组件使用$emit传值给父组件,很麻烦
  • 后来:使用computed和$event
  • 例子代码:
<template><div class="box">grandpa <el-input v-model="model.title"></el-input><Father :titleProp="model.title" @handleInput:titleProp="model.title = $event" /></div>
</template><script>
import Father from "./Father.vue";
export default {data() {return {model: {title: "",},};},components: {Father,},methods: {handleInput(val) {this.model.title = val;},},
};
</script>
<template><div class="father" ref="father">father <el-input v-model="title"></el-input></div>
</template><script>
export default {computed: {title: {get() {return this.$props.titleProp;},set(value) {this.$emit("handleInput:titleProp", value);},},},props: {titleProp: String,},methods: {},
};
</script>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/540769.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【网络】HTTP协议

目录 1. 什么是HTTP协议&#xff1f; 2. 为什么使用HTTP协议&#xff1f; 3. HTTP协议通信过程 4. 什么是url&#xff1f; 5. HTTP报文 5.1 请求报文 5.2 响应报文 6. HTTP请求方式 7. HTTP头部字段 8. HTTP状态码 9. 连接管理 长连接与短连接 管线化连接 1. 什么…

1、鸿蒙学习-为应用/服务进行签名

针对应用/服务的签名&#xff0c;DevEco Studio为开发者提供了自动签名方案&#xff0c;帮助开发者高效进行调试。也可选择手动方式对应用/服务进行签名&#xff0c;如果使用了需要ACL的权限&#xff0c;需采用手动方式进行签名。 自动签名 说明 使用自动签名前&#xff0c;请…

探讨大世界游戏的制作流程及技术——大场景制作技术概况篇

接上文&#xff0c;我们接下来了解一下大世界场景制作技术有哪些&#xff0c;本篇旨在给大家过一遍目前业界的做法&#xff0c;能让大家有一个宏观的知识蓝图。实际上&#xff0c;针对不同的游戏类型和美术风格&#xff0c;制作技术在细节上有着非常大的不同&#xff0c;业界目…

3、设计模式之工厂模式1(Factory)

工厂模式是什么&#xff1f;     工厂模式是一种创建者模式&#xff0c;用于封装和管理对象的创建&#xff0c;屏蔽了大量的创建细节&#xff0c;根据抽象程度不同&#xff0c;主要分为简单工厂模式、工厂方法模式以及抽象工厂模式。 简单工厂模式 看一个具体的需求 看一个…

pytorch升级打怪(三)

数据集合数据加载器 简介加载数据集迭代和可视化数据集为您的文件创建自定义数据集__init____len____getitem__ 准备您的数据以使用DataLoaders进行训练通过DataLoader进行遍载 简介 处理数据样本的代码可能会变得混乱且难以维护&#xff1b;理想情况下&#xff0c;我们希望我…

4种小众的能力,帮你更好地适应未来

新年伊始&#xff0c;又是一个全新的开始。 未来的社会究竟需要什么样的能力&#xff1f;这已经是一个很老的话题&#xff0c;已经有许许多多讨论了。但这其中&#xff0c;可能有一些是容易被人忽略的&#xff0c;或者不容易被注意到的。 我想跟你一起分享&#xff0c;我对这个…

高分1、2号卫星原始遥感影像数据

高分一号 高分一号卫高分一号卫星是中国高分辨率对地观测系统的首发星&#xff0c;突破了高空间分辨率、多光谱与宽覆盖相结合的光学遥感等关键技术&#xff0c;设计寿命5至8年。 高分辨率对地观测系统工程是《国家中长期科学和技术发展规划纲要(2006&#xff5e;2020年)》确定…

vue学习笔记25-组件数据传递透传Attribute

组件数据传递 之前学的 props:父传子 自定义事件&#xff1a;子传父 props可以实现子传父&#xff0c;因为props传递数据不限制类型&#xff0c;当然也可以传函数&#xff0c;而我们可以利用函数互相携带参数实现子传父&#xff08;传一个回调函数&#xff0c;emit的底层原…

MongoDB实战面试指南:常见问题一网打尽

码到三十五 &#xff1a; 个人主页 心中有诗画&#xff0c;指尖舞代码&#xff0c;目光览世界&#xff0c;步履越千山&#xff0c;人间尽值得 ! MongoDB是一款流行的非关系型数据库&#xff0c;以其高效、可扩展的特性受到开发者的青睐。了解MongoDB的架构、存储引擎和数据结…

精酿啤酒:煮沸、发酵与成熟的过程解析

在啤酒酿造过程中&#xff0c;煮沸、发酵与成熟是重要的环节&#xff0c;它们对啤酒的口感、香气和品质具有决定性的影响。下面将详细解析Fendi Club啤酒在煮沸、发酵与成熟过程中的关键步骤和与众不同之处。 煮沸是啤酒酿造过程中的一个重要环节。在这一步骤中&#xff0c;麦汁…

Mac电脑搭建前端项目环境,并适配老项目

1.上一篇文章中&#xff0c;我说到了&#xff0c;node.js中文网下载node 包&#xff0c;根据系统进行选择&#xff0c;然后安装包node即可&#xff0c;对于比较新的项目确实也是适用的&#xff0c;但是老项目就不行了会报错&#xff0c;node版本过高&#xff0c;导致环境不匹配…

基于数据库的全文检索实现

对于内容摘要&#xff0c;信件内容进行全文检索 基于SpringBoot 2.5.6Postgresqljpahibernate实现 依赖 <spring-boot.version>2.5.6</spring-boot.version> <hibernate-types-52.version>2.14.0</hibernate-types-52.version><dependency><…