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

news2025/1/16 16:56:09
  • 原本:父组件使用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.coloradmin.cn/o/1519110.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

‍❄️Unity 官方免费资源大放送!森林、沙漠、北极等 350+逼真的自然纹理 Megapack等你来拿

&#x1f333;350自然纹理 Megapack&#xff0c;免费获取&#xff01;&#x1f381; 你是否热爱游戏开发&#xff0c;却被昂贵的资源库所困扰&#xff1f;你是否渴望创造出令人惊叹的自然场景&#xff0c;却被有限的纹理素材所束缚&#xff1f;如果你的答案是肯定的&#xff0c…

01- Java概述

第1章 Java概述 1.1 Java语言发展历史&#xff08;记关键点&#xff09; Java诞生于SUN&#xff08;Stanford University Network&#xff09;&#xff0c;09年SUN被Oracle&#xff08;甲骨文&#xff09;收购。 Java之父是詹姆斯.高斯林(James Gosling)。 1996年发布JDK1.…

分布式思想

1、单体架构设计存在的问题 传统项目采用单体架构设计,虽然可以在一定的程度上解决企业问题,但是如果功能模块众多,并且将来需要二次开发.由于模块都是部署到同一台tomcat服务器中,如果其中某个模块代码出现了问题,将直接影响整个tomcat服务器运行. 这样的设计耦合性太高.不便…

【软件测试基础篇】第二节.黑盒测试中常见方法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言⼀、等价类法&#xff08;解决穷举问题&#xff09;二、边界值法&#xff08;解决边界限制问题&#xff09;三、正交表法&#xff08;解决多条件依赖问题&#…

Docker学习之镜像管理(超详解析)

Docker镜像生命周期&#xff08;可以把docker镜像理解为虚拟机镜像&#xff09; 实验内容&#xff1a; 搜索官方仓库镜像 [rootlocalhost ~]# docker search busybox //以查找busybox为例 搜索说明&#xff1a;name镜像名称 description镜像说明 stars点赞数量 official…

移动端使用 echarts中 滚动条 dataZoom 改造为内容区域可以左右滚动

移动端使用 echarts中 滚动条 dataZoom 改造为内容区域可以左右滚动 直接上图 &#xff1a; 主要是下面这段代码&#xff1a; "dataZoom": [{"type": "inside","show": false,"xAxisIndex": [0],"zoomOnMouseWheel&…

APP在应用商店该如何做好节日营销

38妇女节刚刚过去&#xff0c;不少商家吃上了一波节日红利。 你有没有注意到很多App在应用商店里改头换面&#xff0c;开展了很多以“三八节”为主题的营销活动&#xff0c;并且取得了不错的成绩。 可见季节性营销策划对产品的下载量和用户留存率还是很重要的。 那么我们如何…

synchronized底层原理 以及 公平锁和非公平锁的基本概念

一、公平锁和非公平锁的基本概念 公平锁&#xff1a; 简单讲就是当一个锁被释放的时候会执行唤醒&#xff0c;此时等待中的其他线程取排在最前面的线程获取被释放的锁并进入运行态。 非公平锁&#xff1a; 同样的当一个锁释放时&#xff0c;其他等待的线程并不需要排队&#…

LeetCode 80.删除有序数组中的重复项 II

目录标题 删除有序数组中的重复项 II题目解题思路实现代码代码讲解总结删除有序数组中的重复项 II 题目 解题思路 慢指针指向满足条件的数字的末尾,快指针遍历原数组。 并且用一个变量记录当前末尾数字出现了几次,防止超过两次。最后返回维护慢指针的结果+1即可。 实现代…

【数据可视化】Echarts最常用图表

个人主页 &#xff1a; zxctscl 如有转载请先通知 文章目录 1. 前言2. 准备工作3. 柱状图3.1 绘制堆积柱状图3.2 绘制标准条形图3.3 绘制瀑布图 4. 折线图4.1 绘制堆积面积图和堆积折线图4.2 绘制阶梯图 5. 饼图5.1 绘制标准饼图5.2 绘制圆环图5.2 绘制嵌套饼图5.3 绘制南丁格尔…

文件操作与IO流

文章目录 File文件操作类IO流原理及流的分类节点流FileInputStreamFileOutputStreamFileReaderFileWriter 处理流BufferedReaderBufferedWriterBufferedInputStreamBufferedOutputStreamObjectInputStreamObjectOutputStreamPrintStreamPrintWriter 标准输入输出流 Properties …

【声速、频率、波长、波数、波矢】

【声速、频率、波长、波数、波矢】 在声学中,声速(Speed of Sound)、频率(Frequency)、波长(Wavelength)、波数(Wave Number)和波矢(Wave Vector)是描述声波传播特性的重要物理量。它们之间的关系如下: 声速(Speed of Sound): 表示声波在介质中传播的速度,通常…

Vue 运行报错 Error: Cannot find module ‘semver‘

文章目录 项目场景&#xff1a;问题描述解决方案&#xff1a;注意&#xff1a; 项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 运行 Vue 后遇到一个报错&#xff1a; 我的项目是WebStorm 运行的&#xff0c;不通过命令运行&#xff0c;我奇怪的是…

用网格大师网络重划分时,坐标原点按照XML文件原点填写,导出的瓦块文件命名不对,坐标原点该怎么填写

瓦块名称和原来不一致的原因是瓦块原点这里设置的不对&#xff0c;要和重建设置的瓦块原点保持一致。 网格大师是一款能够解决实景三维模型空间参考、原点、瓦块大小不统一&#xff0c;重叠区域处理问题的工具“百宝箱”&#xff0c;集格式转换、坐标转换、轻量化、瓦片重划分…

探秘Kafka位移在消息旅程中的神奇

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 探秘Kafka位移在消息旅程中的神奇 前言什么是消费者位移消费者位移的定义和作用&#xff1a;消费者位移对于消息传递的一致性至关重要的原因&#xff1a; 位移的存储方式位移信息的存储方式&#xff1…

非常实用的区间预测!基于QR-BiGRU的时间序列分位数区间预测程序,电池寿命、轴承寿命、负荷预测、光伏、风速、电价、碳价预测

适用平台&#xff1a;Matlab2022版及以上 本程序参考中文EI期刊《电工技术学报》2024年1月30日网络首发文献&#xff1a;《基于QR-BiGRU神经网络与区间抗差增广状态估计的线路参数区间追踪估计》&#xff0c;提出基于QR-BiGRU双向门控循环单元网络的时间序列分位数区间预测程序…

解读 PICO 全新无灯环手柄背后的技术突破

从上世纪70年代的雅达利游戏机开始到后来的PS&#xff0c;Xbox和Switch等&#xff0c;按钮式控制器一直是团队输入的主要方式&#xff0c;并将继续在相当长的时间里继续作为重要的交互方式。这种控制器同样在新兴的XR系统中扮演着关键的角色&#xff0c;通过熟悉的按钮布局和物…

Scala--01--简介、环境搭建

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1. Scala简介1.1 Scala是什么&#xff1f;官网&#xff1a; [https://scala-lang.org/](https://scala-lang.org/)官方文档&#xff1a; [https://docs.scala-lang.…

Unity中的网格创建和曲线变形

Unity中的网格创建和曲线变形 3D贝塞尔曲线变形贝塞尔曲线基础线性公式二次方公式三次方公式 Unity 实现3D贝塞尔曲线变形准备工作脚本概述变量定义 变量解析函数解析 获取所有子节点GetAllChildren 获取所有子节点UpdateBezierBend 控制点更新CalculateBezier Bezier 曲线公式…

解锁基于LLMS的咒语:通过上下文学习重新思考对齐

一、写作动机&#xff1a; 最近的一项研究&#xff0c;LIMA&#xff0c;表明仅使用1K个示例进行SFT也可以实现显著的对齐性能&#xff0c;这表明对齐微调的效果可能是“表面的”。&#xff08;知识和推理能力来源于预训练&#xff0c;而不是必须通过对齐微调获得的。&#xff…