v-model双向绑定组件通信

server/2024/10/18 9:40:42/

给input元素绑定原生input事件,触发input事件时,进而触发update:model-value事件

<template>
<Child v-model="lastName" v-if="true"></Child>
<p >{{lastName}}</p>
</template>
<script>
import Child from "./components/child.vue"
data() {return {lastName: '我是父组件'};},
</script>

子组件

<template><div>我是child组件<!-- <input type="text" :value="lastName" @input="$emit('update', $event.target.value)"> --><input type="text" v-model="input"></div>
</template>
<script>
export default {name: 'Child',props: ['lastName'],model:{prop: 'lastName',event: 'update'},data() {return {// value: this.lastName,}},computed: {input: {get() {return this.lastName;},set(val) {this.$emit('update', val);    // 触发}}},mounted() {},methods: {},}
</script>

http://www.ppmy.cn/server/131977.html

相关文章

如何理解应用 Java 多线程与并发编程?

如何理解应用 Java 多线程与并发编程&#xff1f; 在日常开发中&#xff0c;随着硬件性能的提升&#xff0c;尤其是多核处理器的普及&#xff0c;如何让应用程序更好地利用这些资源&#xff0c;成为每个程序员需要考虑的问题。这时候&#xff0c;多线程与并发编程就显得尤为重…

windows自动化(一)---windows关闭熄屏和屏保

电脑设置关闭屏幕和休眠时间不起作用解决方案 一共三个方面注意&#xff1a; 一、关闭屏保设置&#xff1a; 二、电源管理设置 三、关闭盖子不做操作&#xff1a; 第一点很重要&#xff0c;就算二三都做了&#xff0c;一没做&#xff0c;照样不行。

OKHTTP 如何处理请求超时和重连机制

&#x1f604;作者简介&#xff1a; 小曾同学.com,一个致力于测试开发的博主⛽️&#xff0c;主要职责&#xff1a;测试开发、CI/CD 如果文章知识点有错误的地方&#xff0c;还请大家指正&#xff0c;让我们一起学习&#xff0c;一起进步。 &#x1f60a; 座右铭&#xff1a;不…

【优选算法】(第三十一篇)

目录 最⻓公共前缀&#xff08;easy&#xff09; 题目解析 讲解算法原理 编写代码 最⻓回⽂⼦串(medium) 题目解析 讲解算法原理 编写代码 最⻓公共前缀&#xff08;easy&#xff09; 题目解析 1.题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 2.题…

【QT Quick】C++交互:暴露 C++ 对象到 QML

【QT Quick】C交互&#xff1a;暴露 C 对象到 QML 在 Qt Quick 开发中&#xff0c;使用 Context Property 将 C 对象暴露给 QML 是一种直观有效的方式。这种方法允许我们直接在 QML 中访问 C 对象的属性和方法&#xff0c;而无需使用信号和槽。这篇文章将详细展开如何通过 Con…

【ARM 嵌入式 编译系列 10.8 -- 介绍 GCC Toolchain】

> ARM GCC 编译精讲系列课程链接 < 文章目录 GCC 工具链详细介绍工具链简介详细介绍1. GCC&#xff08;GNU Compiler Collection&#xff09;2. Newlib&#xff08;C 标准库&#xff09;3. Binutils&#xff08;GNU 二进制工具&#xff09;4. GDB&#xff08;GNU 调试器&…

B2050 三角形判断

题目描述 给定三个正整数&#xff0c;分别表示三条线段的长度&#xff0c;判断这三条线段能否构成一个三角形。 输入格式 输入共一行&#xff0c;包含三个正整数&#xff0c;分别表示三条线段的长度&#xff0c;数与数之间以一个空格分开。&#xff08;三条边的长度均不超过…

PyCharm 项目解释器切换指南:如何在项目中更换 Python Interpreter

PyCharm 项目解释器切换指南&#xff1a;如何在项目中更换 Python Interpreter 文章目录 PyCharm 项目解释器切换指南&#xff1a;如何在项目中更换 Python Interpreter一 Settings 设置二 Project 选项三 Conda Environment四 更换 Environment 本文详细介绍了在 macOS 系统中…