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>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

pta—剪切粘贴

使用计算机进行文本编辑时常见的功能是剪切功能&#xff08;快捷键&#xff1a;Ctrl X&#xff09;。请实现一个简单的具有剪切和粘贴功能的文本编辑工具。 工具需要完成一系列剪切后粘贴的操作&#xff0c;每次操作分为两步&#xff1a; 剪切&#xff1a;给定需操作的起始位置…

《深入解析 C#》—— C# 2 部分

文章目录 第二章 C# 22.1 泛型&#xff08;*&#xff09;2.2 default 和 typeof&#xff08;*&#xff09;2.3 可空值类型2.3.1 Nullable<T> 结构体&#xff08;framework 支持&#xff09;2.3.2 装箱&#xff08;CLR 支持&#xff09;2.3.3 “?”后缀&#xff08;语法支…

蓝桥杯(1):python排序

1 基础 1.1 输出 1.1.1 去掉输出的空格 print("Hello","World",123,sep"") print("hello",world,123,sep) print(hello,world,123) #输出结果 #HelloWorld123 #helloworld123 #hello world 123 1.1.2 以不同的方式结尾 print(&quo…

【Android】AOSP 架构

Android 官网对 AOSP 结构图进行了更新&#xff0c;如下所示&#xff1a; Android 应用&#xff08;Android Apps&#xff09; 完全使用 Android API 开发的应用。在某些情况下&#xff0c;设备制造商可能希望预安装 Android 应用以支持设备的核心功能。 特权应用&#xff08…

先验分布、后验分布、极大似然的一点思考

今天和组里同事聊天的时候&#xff0c;无意中提到了贝叶斯统计里先验分布、后验分布、以及极大似然估计这三个概念。同事专门研究如何利用条件概率做系统辨识的&#xff0c;给我画了一幅图印象非常深刻&#xff1a; 其中k表示时序关系。上面这个图表示后验分布是由先验分布与似…

怎样在CSDN赚点零花钱

请教一下各位大佬&#xff0c;看到你们在CSDN很多都几万粉丝以上&#xff0c;能不能分享一下有什么涨粉的经验&#xff0c;还有怎样转化为额外收益……感谢各位提供宝贵的经验&#xff0c;谢谢……

rviz上不显示机器人模型(模型只有白色)

文档中的是base_footprint&#xff0c;需要根据自己所设的坐标系更改&#xff0c;我的改为base_link 如何查看自己设的坐标系&#xff1a; 这些parent父坐标系就是 同时打开rviz后需要更改成base_link

Kubernetes operator系列:kubebuilder 实战演练 之 开发多版本CronJob

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 Kubernetes operator学习 系列文章&#xff0c;本节会在上一篇开发的Cronjob基础上&#xff0c;进行 多版本Operator 开发的实战 本文的所有代码&#xff0c;都存储于github代码库&#xff1a;https://github.c…

几何相互作用GNN预测3D-PLA

预测PLA是药物发现中的核心问题。最近的进展显示了将ML应用于PLA预测的巨大潜力。然而,它们大多忽略了复合物的3D结构和蛋白质与配体之间的物理相互作用,而这对于理解结合机制至关重要。作者提出了一种结合3D结构和物理相互作用的几何相互作用图神经网络GIGN,用于预测蛋白质…

Android studio 性能调试

一、概述 Android studio 的Profiler可用来分析cpu和memory问题&#xff0c;下来进行说明介绍。 二、Android studio CPU调试 从开发模拟器或设备中启动应用程序&#xff1b; 在 Android Studio 中&#xff0c;通过选择View > Tool Windows > Profiler启动分析器。 应…

VMware workstation的安装

VMware workstation安装&#xff1a; 1.双击VMware-workstation-full-9.0.0-812388.exe 2.点击next进行安装 选择安装方式 Typical&#xff1a;典型安装 Custom&#xff1a;自定义安装 选择程序安装位置 点击change选择程序安装位置&#xff0c;然后点击next 选择是否自动…

D-Star 寻路算法

D-Star 寻路算法 下面简写 D-Star 为 D* D算法&#xff1a;D 算法”的名称源自 Dynamic A Star,最初由Anthony Stentz于“Optimal and Efficient Path Planning for Partially-Known Environments”中介绍。它是一种启发式的路径搜索算法&#xff0c; 适合面对周围环境未知或者…

借助 Terraform 功能协调部署 CI/CD 流水线-Part2

在第一部分的文章中&#xff0c;我们介绍了3个步骤&#xff0c;完成了教程的基础配置&#xff1a; 使用 Terraform 创建 AWS EKS Infra在 EKS 集群上部署 ArgoCD 及其依赖项设置 Bitbucket Pipeline并部署到 ECR Repo 本文将继续完成剩余的步骤&#xff0c;以实现 Terraform 编…

低代码与AI:构建面向未来的智能化应用

引言 在当今数字时代&#xff0c;技术的快速发展为各行各业带来了前所未有的机遇和挑战。企业和组织面临着如何迅速开发和交付高质量应用的需求&#xff0c;同时还需要应对日益复杂的业务需求和用户期望。在这样的背景下&#xff0c;低代码与人工智能&#xff08;AI&#xff0…

Oracle事务槽wrap#上限问题

问题背景&#xff1a; 近期遇到了一个Oracle回滚段事务ID达到上限的问题&#xff0c;应用前台语句操作失败&#xff0c;出现ORA-01558: out of transaction IDs in rollback segment _SYSSMU10_4119033733$报错。 问题分析: 第一次遇到该报错&#xff0c;先到Oracle mos上查了…

[CISCN2019 华东南赛区]Web11

模块注入题&#xff0c;这类题一般拥有固定的payload。 界面大概就是这么个样子 返回了IP地址&#xff0c;提示getip&#xff0c;xff等。 这是smarty模板。很明显了&#xff0c;这个模板存在xff处的命令执行。抓取数据包并添加字段 X-Forwarded-For:{{system(ls)}} cat /fla…

【数据结构和算法初阶(C语言)】队列实操(概念实现+oj题目栈和队列的双向实现,超级经典!!!)

1. 队列的概念及结构 队列&#xff1a;只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表&#xff0c; 队列具有先进先出 FIFO(First In First Out) 入队列&#xff1a;进行插入操作的一端称为队尾 出队列&#xff1a;进行删除操作的一端称为…

基于嵌入式的智能交通信号灯管理系统的设计与实现

项目介绍 有目共睹电子设备已经席卷了整个人类生活&#xff0c;他们不断改善着人们的起居住行&#xff0c;这也就促进了嵌入式人工智能的快速发展。 本课设模拟系统分为软硬件两部分组成。硬件部分是由两位8段数码管和LED灯构成的显示系统和控制电路等组成&#xff0c;能较好的…

疫情网课管理系统|基于springboot框架+ Mysql+Java+Tomcat的疫情网课管理系统设计与实现(可运行源码+数据库+设计文档+部署说明)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 目录 前台功能效果图 ​编辑 学生功能模块 管理员功能 教师功能模块 系统功能设计 数据库E-R图设计 lun…

JVM 相关知识点记录

文章目录 前言哪些内存需要回收方法区的垃圾回收垃圾收集算法垃圾收集器年轻代进入老年代条件内存担保机制FullGC 触发时机GC日志解析日志参数 前言 JVM包含内容&#xff1a; 类装载子系统(Class Load SubSystem)运行时数据区(Run-Time Data Areas) 堆栈 局部变量表操作数栈动…