vue自定义组件实现v-model双向数据绑定

一、Vue2 实现自定义组件双向数据绑定

v-model 实现双向数据绑定

  在vue2中,子组件上使用v-model的值默认绑定到子组件的props.value属性上,由于子组件不能改变父组件传来的属性,所以需要通过$emit触发事件使得父组件中数据的变化,然后再同步到子组件。vue2默认触发v-model数据变化的事件为input

使用如下:

子组件MySon

<template><div><div>双向数据绑定:{{$props.value}}</div><div><button @click="addValue">点击++</button></div></div>
</template>
​
<script>
export default {name: "MySon",props: ['value'],methods: {addValue() {//  触发父组件中v-model绑定数据的变化,由于不能改变props数据中的值,所以不要写this.$props.value++这样的操作this.$emit('input', this.$props.value + 1)}}
}
</script>

如果希望改变接收v-model的属性或改变触发v-model数据变化的事件,可通过model:{}配置实现,如:

<template><div><div>双向数据绑定:{{$props.value666}}</div><div><button @click="addValue666">点击++</button></div></div>
</template>
​
<script>
export default {name: "MySon",props: ['value666'],// --> 配置接收v-model数据的属性以及改变数据的事件 <--model: {prop: 'value666',event: 'updateValue666'},methods: {addValue666() {this.$emit('updateValue666', this.$props.value666 + 1)}}
}
</script>

父组件

<template><div id="app"><MySon v-model="num"></MySon></div>
</template>
​
<script>
import MySon from "@/components/MySon.vue";
export default {name: 'App',components: {//注册子组件MySon},watch: {//  监视num数据的变化  num(newValue, oldValue) {console.log('num: ' + oldValue + ' -> ' + newValue)},},data() {return {num: 10,}},
}
</script>

.sync 实现子组件多个数据双向绑定

Vue2中使用v-model只能使用一次,如果要实现多个双向数据绑定,可以借助.sync修饰,使用语法为 :属性.sync="数据" ,用这种绑定代替v-model,触发数据改变的事件为update:属性名

使用如下:

子组件

<template><div><div>sync双向数据绑定:{{$props.data}}</div><div><button @click="addData">点击++</button></div></div>
</template>
​
<script>
export default {name: "MySon",//    用props.data属性接收双向绑定的数据  props: ['data'],methods: {addData() {//    触发 update:data 事件改变父组件中绑定的值   this.$emit('update:data', this.$props.data + 1)}}
}
</script>

父组件

<template><div id="app"><!-- 用 :data.sync 将数据双向绑定到子组件的data属性上 -->  <MySon :data.sync="num"></MySon></div>
</template>
​
<script>
import MySon from "@/components/MySon.vue";
export default {name: 'App',components: {MySon},watch: {num(newValue, oldValue) {console.log('num: ' + oldValue + ' -> ' + newValue)}},data() {return {num: 10}},
}
</script>

至于为什么子组件要通过$emit('update:属性名', 数据);来触发父组件数据变化,原因如下:

<MySon :data.sync="num"></MySon>||\/等价于
<MySon :data="num" @update:data="(newData) => {num = newData}"></MySon>

二、Vue3 实现双向数据绑定

在Vue3中,v-model可以实现多个数据双向数据绑定,同时.sync修饰符已经不再生效。

v-model 实现双向数据绑定

vue3中子组件上使用v-model绑定的数据默认传到子组件的props.modelValue属性上(vue2是props.value属性),并且默认触发数据变化的事件为update:modelValuevue2为input

使用如下:

子组件

<template><div><div>双向数据绑定modelValue:{{props.modelValue}}</div><div><button @click="addModelValue">点击++</button></div></div>
</template>
<script setup>//    props.modelValue接收v-model绑定的数据const props = defineProps(['modelValue'])const emit = defineEmits(['update:modelValue'])function addModelValue(){//  触发父组件中双向绑定数据的变化emit('update:modelValue', props.modelValue + 1)}
</script>

父组件

<template><Son v-model="num"></Son>
</template>
​
<script setup>import {ref, watch} from "vue";import Son from "@/components/Son.vue";  const num = ref(0)//    监视num数据变化watch(num, (newValue, oldValue) => {console.log('num: ' + oldValue + '->' + newValue)})
</script>

v-model: 属性 实现多个数据双向绑定

数据绑定语法:v-model:属性="数据"

触发数据变化的事件:update:属性

使用如下:

子组件

<template><div><div>双向数据绑定data:{{props.data}}</div><div><button @click="addData">点击++</button></div></div>
</template>
​
<script setup>const props = defineProps(['data'])const emit = defineEmits(['update:data'])const addData = () => {emit('update:data', props.data + 1)}
</script>

父组件

<template><!-- 将num数据绑定到子组件的data属性上 --><Son v-model:data="num"></Son>
</template>
<script setup>import {ref, watch} from "vue";import Son from "@/components/Son.vue";const num = ref(0)watch(num, (newValue, oldValue) => {console.log('num: ' + oldValue + '->' + newValue)})
</script>

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

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

相关文章

【笔记】数据结构与算法

参考链接&#xff1a;数据结构(全) 参考链接&#xff1a;数据结构与算法学习笔记 一些PPT的整理&#xff0c;思路很不错&#xff0c;主要是理解角度吧&#xff0c;自己干啃书的时候结合一下会比较不错 0.总论 1.数据 注&#xff1a;图是一种数据结构&#xff01;&#xff01;…

无人机救援系统基本组成

无人机救援系统基本组成 1. 源由2. 组成2.1 无人机载具2.1.1 多旋翼2.1.2 垂起固定翼2.1.3 智能避障2.1.4 物资投递 2.2 智能吊舱2.2.1 云台2.2.2 高清摄像2.2.3 红外热成像2.2.4 激光测距2.2.5 目标跟踪 2.3 通讯链路2.3.1 超长距离通信2.3.2 长距离通信2.3.3 中等距离通信 2.…

拍拍贷鸿蒙版H5容器之路

背景介绍 业务背景 2024年1月18日华为宣布&#xff1a;HarmonyOS NEXT 将不再支持 Android系统&#xff0c;基于以上背景及国内信贷业务现状&#xff0c;公司决定启动借款App鸿蒙化项目。 下图是2024年6月华为HDC大会上&#xff0c;华为宣布 HarmonyOS NEXT 将面向开发者和先…

微信小程序服务通知

项目中用到了小程序的服务消息通知&#xff0c;通知订单状态信息&#xff0c;下边就是整理的一下代码&#xff0c;放到项目中&#xff0c;把项目的小程序appid和小程序的secret写进去&#xff0c;直接运行即可 提前申请好小程序服务信息通知短信模板&#xff0c;代码需要用到模…

3000字帮你彻底搞懂Java抽象类与接口的区别(含JDK8接口新增三种方法与丰富案例)

Java-OOP 1-Final 1.1简介 final关键字是最终的意思&#xff0c;可以修饰&#xff1a;类、方法、变量。 修饰类&#xff1a;该类被成为最终类&#xff0c;特点是不能被继承了。修饰方法&#xff1a;该方法被称为最终方法&#xff0c;特点是不能被重写了。修饰变量&#xff…

有没有噪音低的宠物空气净化器推荐?希喂、IAM性能PK

有一说一&#xff0c;随着清洁家电市场的不断发展&#xff0c;市面上的各种清洁家电品类也是越来越多&#xff0c;像是吸尘器、洗地机、扫地机等等这些产品估计大家都很熟悉了。 但&#xff01;如果你家也跟我家一样也是养了几只猫猫狗狗&#xff0c;那你就会发现到&#xff0…

vscode摸鱼学习插件开发

不知道大家在摸鱼的时候&#xff0c;会不会想要学习&#xff1f; 或者有没有考公人&#xff0c;下班要学习的&#xff1f; 上班时间摸鱼&#xff0c;下班时间不够学习&#xff1f; 为此&#xff0c;我决定开发一个vscode插件&#xff0c;来刷粉笔题 粉笔插件名称&#xff1a;…

hive将包含逗号的字段拆分为多列

目录 一、概述 二、行动 1.准备数据 2.数据清洗 3.substring_index函数 4.split函数实现 一、概述 想将hive表中包含逗号的字段按逗号做分隔符进行分列操作 二、行动 1.准备数据 --1 select {1,2,3,4,5,6,7,8} as num_str --使用的数据2.数据清洗 --2 select num_s…

文心一言 VS 讯飞星火 VS chatgpt (381)-- 算法导论24.5 1题

一、给出图24-2的与图中两棵最短路径树不同的另外两棵最短路径树。如果要写代码&#xff0c;请用go语言。 文心一言&#xff1a; 在图论中&#xff0c;最短路径树&#xff08;Shortest Path Tree, SPT&#xff09;是一种从单个源点到所有其他节点的最短路径形成的树。给定一个…

故障诊断 | MTF-TLSSA-DarkNet-GRU-MSA迁移学习故障识别程序(t分布+莱维飞行改进麻雀优化)

故障诊断 | 故障诊断实例代码 目录 故障诊断 | 故障诊断实例代码效果一览基本介绍程序设计参考资料 效果一览 基本介绍 利用了迁移学习和多项技术改进&#xff0c;包括麻雀搜索法、DarkNet19、GRU、多头注意力机制等&#xff0c;以提高故障识别的准确性和效率 模型框架&#x…

在Bash脚本中 set -e 是什么意思

问题 我正在研究这个预安装(preinst)脚本的内容&#xff0c;该脚本会在从 Debian 软件包(.deb)文件解压该包之前执行。 脚本包含以下代码&#xff1a; #!/bin/bash set -e # Automatically added by dh_installinit if [ "$1" install ]; thenif [ -d /usr/share…

使用yolov3配置文件训练自己的数据

目录 前言 一、准备数据集 二、创建文件结构 三、格式化文件 1.data文件夹 2.config文件夹 四、修改yolo的配置文件 1.train文件 2.json2yolo文件 3.datasets文件 前言 使用yolov3框架训练自己的数据大致分为这四步&#xff1a; 准备数据集创建文件结构格式化文件 …

【小白学机器学习29】 概率统计与图形 ( hist, bar, pie , box ,scatter ,line)

目录 1 频度/次数 1.1 频度统计表&#xff1a;频度分布表 1.2 频数分布图直方图 histogram / hist 1.3 对比&#xff0c;柱状图 bar graph /column chart 2 饼图 pie chart 2.1饼图特点 3 南丁格尔玫瑰图 4 茎叶图 stem-and-leaf display 5 箱型图 box plot 6 …

springboot098基于web的网上摄影工作室的开发与实现(论文+源码)_kaic

网上摄影工作室 摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了网上摄影工作室的开发全过程。通过分析网上摄影工作室管理的不足&#xff0c;创建了一个计算机管理网上摄影工作室的方案。文章介绍了网上摄影工…

【再谈设计模式】单例模式~唯一性的守护者

一、引言 在软件工程中&#xff0c;软件开发&#xff0c;设计模式是提高代码复用性和可维护性的有效工具。单例模式&#xff08;Singleton Pattern&#xff09;作为一种创建型设计模式&#xff0c;旨在确保一个类只有一个实例&#xff0c;并提供对该实例的全局访问。这一模式在…

UDP-鼠李糖合成酶基因的克隆与鉴定-文献精读76

何首乌中UDP-鼠李糖合成酶基因FmRHM1/2的克隆与鉴定 摘要 UDP-鼠李糖是一种由UDP-鼠李糖合酶&#xff08;RHM&#xff09;催化合成的鼠李糖供体&#xff0c;而鼠李糖是鼠李糖苷化合物的重要组成部分&#xff0c;植物中只有少数基因编码的酶参与UDP-鼠李糖生物合成。本研究基于…

创建多维数组的全部元素的索引np.indices

【小白从小学Python、C、Java】 【考研初试复试毕业设计】 【Python基础AI数据分析】 创建多维数组的 全部元素的索引 np.indices [太阳]选择题 根据题目代码&#xff0c;执行的结果是&#xff1f; import numpy as np arr np.arange(6).reshape((2, 3)) print(&quo…

C/C++ 矩阵的QR分解

#include <iostream> #include <vector> using namespace std;int main() /* 矩阵A的QR分解*/ {// 动态分配内存int m 3; // 行数int n 3; // 列数// 初始化矩阵Adouble A[3][3] {{1, 2, 2},{2, 1, 2},{1, 2, 1}};double R[3][3] { 0 };double Q[3][3] { 0 };…

2023-2024年教育教学改革、教学成果奖等项目申请书合集-最新出炉 附下载链接

2023-2024年教育教学改革、教学成果奖等项目申请书合集 下载链接-点它&#x1f449;&#x1f449;&#x1f449;&#xff1a;2023-2024年教育教学改革、教学成果奖等项目申请书合集-最新出炉.zip 资源介绍 本资源展示了2023-2024年高等教育领域的教育教学改革项目以及教学成…

某大型建设集团有限公司信息化技术方案(250页WORD)

方案介绍&#xff1a; 本信息化技术方案旨在构建一个集成度高、功能全面、操作简便的信息化系统&#xff0c;涵盖公司管理、业务运营、项目监控、数据分析等多个方面。通过引入云计算、大数据、物联网、人工智能等先进技术&#xff0c;实现资源的优化配置、流程的高效协同和数…