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.mzph.cn/news/743196.shtml

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

相关文章

STM32平替GD32有多方便

众所周知, GD32一直模仿STM32,从未被超越。 我最近公司使用的GD32E230C6T6 这款芯片有48个引脚。 属于小容量的芯片。 我有一个用STM32写的代码,之前是用的 STM32F103CB 这款芯片是中容量的。 不过在keil中,只需要这两步,就能使用原来的逻辑,几乎不用修改代码。 1. …

华为组网:核心交换机旁挂防火墙,基于ACL重定向配置实验

如图所示&#xff0c;由于业务需要&#xff0c;用户有访问Internet的需求。 用户通过接入层交换机SwitchB和核心层交换机SwitchA以及接入网关Router与Internet进行通信。为了保证数据和网络的安全性&#xff0c;用户希望保证Internet到服务器全部流量的安全性&#xff0c;配置重…

2024年【安全生产监管人员】及安全生产监管人员模拟考试题库

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年【安全生产监管人员】及安全生产监管人员模拟考试题库&#xff0c;包含安全生产监管人员答案和解析及安全生产监管人员模拟考试题库练习。安全生产模拟考试一点通结合国家安全生产监管人员考试最新大纲及安全生…

jeecg 项目 springcloud 项目有一个模块 没加载进来 只需要 把这个模块放到 可以加载到模块的位置 刷新依赖

springcloud 项目有一个模块 没加载进来 只需要 把这个模块放到 可以加载到模块的位置 刷新依赖

01-java入门了解--cmd命令、jdk、java的认识

cmd常用命令 java入门需要安装的环境 jdk。&#xff08;下载好jdk&#xff0c;并配置好环境&#xff09;idea。&#xff08;或者其他的编程工具&#xff09; jdk安装目录介绍 第一步&#xff1a;编写程序&#xff08;程序员写.java后缀的文件&#xff09; 第二步&#xff1a;…

设计模式 -- 2:策略模式

目录 总结部分&#xff1a;策略模式的优点部分代码部分 总结部分&#xff1a; 策略模式和简单工厂模式很像 区别在于 简单工厂模式 需求的是由工程创造的类 去给客户直接答案 而策略模式在于 我有主体 一个主体 根据策略的不同来进行不同的计算 我的主体就负责收钱 然后调度相…

day08-Mybatis入门

MyBatis 是一款优秀的 持久层 框架&#xff0c;用于简化 JDBC 的开发。 官网&#xff1a;https://mybatis.org/mybatis-3/zh/index.html 一、快速入门 1.1 Mybatis 操作数据库的步骤 准备工作(创建 springboot 工程、数据库表 user、实体类 User)引入 Mybatis 的相关依赖&…

(C语言)strcat函数详解与模拟实现与strncat函数详解

目录 1. strcat函数详解 1. strcat函数模拟实现 3. strcat函数的危险性 4. strncat函数详解 4.1 strncat函数的特殊情况验证 1. strcat函数详解 头文件<string.h> 该函数是用来对字符串末尾追加字符串的&#xff0c;有两个参数&#xff0c;destination是要被追加的字…

SpringBoot+Vue项目报错(问题已解决)

1、错误日志 2、分析原因&#xff1a; JWT strings must contain exactly 2 period characters. Found: 0 JWT字符串必须包含2个句号字符。发现:0 分析&#xff1a;可以判断出大概可能是token格式出现了问题 3、参考 http://t.csdnimg.cn/hfEiY 4、检查后端代码是否出现问…

鸿蒙Socket通信示例(TCP通信)

前言 DevEco Studio版本&#xff1a;4.0.0.600 参考链接&#xff1a;OpenHarmony Socket 效果 TCPSocket 1、bind绑定本地IP地址 private bindTcpSocket() {let localAddress resolveIP(wifi.getIpInfo().ipAddress)console.info("111111111 localAddress: " …

WordPress网站启用cloudflare的CDN加速后,网站出现多重定向无法访问

这是一个使用Hostease的Linux虚拟主机的客户反馈的问题&#xff0c;Hostease的虚拟主机使用的也是cPanel面板&#xff0c;客户使用的是cPanel的softaculous安装的WordPress&#xff0c;但是在安装完成后&#xff0c;并且解析了域名之后&#xff0c;发现网站无法访问&#xff0c…

ChatGPT提问技巧——对抗性提示

ChatGPT提问技巧——对抗性提示 对抗性提示是一种允许模型生成能够抵御某些类型的攻击或偏差的文本的技术。这种技术可用于训练更健壮、更能抵御某些类型的攻击或偏差的模型。 要在 ChatGPT 中使用对抗性提示&#xff0c;应为模型提供一个提示&#xff0c;该提示的设计应使模…

Android Studio入门——页面跳转

1.工程目录 2.MainActivity package com.example.demo01;import android.content.Intent; import android.os.Bundle; import android.view.View; import android.widget.TextView;import androidx.appcompat.app.AppCompatActivity;public class MainActivity extends AppCo…

如何处理Android悬浮弹窗双击返回事件?

目录 1 前言 1.1 准备知识 1.2 问题概述 2 解决方案 3 代码部分 3.1 动态更新窗口焦点 3.2 窗口监听返回事件 3.3 判断焦点是否在窗口内部 3.4 窗口监听焦点移入/移出 1 前言 1.1 准备知识 1&#xff09;开发环境&#xff1a; 2D开发环境&#xff1a;所有界面或弹窗…

【python】anaconda安装过程

【运行环境】Windows11 文章目录 一、anaconda下载二、anaconda安装三、环境变量配置四、测试环境变量是否配置成功五、总结 一、anaconda下载 1、输入网址“https://www.anaconda.com”进入Anaconda官网。 2、找到【Free Download】点击进入&#xff1a; 3、点击对应系统的…

Redis到底是单线程还是多线程!,【工作感悟】

无论你是做 Python&#xff0c;PHP&#xff0c;JAVA&#xff0c;Go 还是 C#&#xff0c;Ruby 开发的&#xff0c;都离不开使用 Redis。 大部分程序员同学工作中都有用到 Redis&#xff0c;但是只限于会简单的使用&#xff0c;对Redis缺乏整体的认知。 无论是在大厂还是在中小…

数据结构 day2

1:思维导图 2&#xff1a;计算结构体大小 3&#xff1a;大小端存储 &#xff08;1&#xff09;&#xff1a;数据溢出 1 #include <stdio.h>2 #include <string.h>3 #include <stdlib.h>4 int main(int argc, const char *argv[])5 {6 short a 0x1234;…

中国金融统计年鉴、中国保险统计年鉴、中国人口与就业统计年鉴、国民经济和社会发展公报、中国劳动统计年鉴

数据下载链接&#xff1a;百度云下载链接 统计年鉴是指以统计图表和分析说明为主&#xff0c;通过高度密集的统计数据来全面、系统、连续地记录年度经济、社会等各方面发展情况的大型工具书来获取统计数据资料。 统计年鉴是进行各项经济、社会研究的必要前提。而借助于统计年…

一文讲懂 C++ 类和对象(1)

0. 面向过程程序设计和面向对象程序设计的区别 面向对象程序设计往往关注的是怎么去做&#xff0c;是将解决问题的步骤分析出来&#xff0c;然后用函数把步骤一步一步实现&#xff0c;然后再依次调用就可以了。而面向对象是将构成问题的事物&#xff0c;分解成若干个对象&…

Windows达梦数据库(下载及使用)

解压安装包 点击最后一个文件 下一步 接受 下一步 下一步 下一步 点击初始化 开始