Vue 组件间的数据绑定

embedded/2024/9/25 7:52:32/

在Vue组件中,v-model指令可以用来实现双向数据绑定。它用于将组件的属性和父组件中的数据进行双向绑定,使得当属性的值改变时,父组件中的数据也会相应地改变,并且当父组件中的数据改变时,属性的值也会相应地改变。

目录

v-model

表单类组件使用v-model简化绑定

化简前

化简后


v-model

原理:v-model本质上是一个语法糖(语法简写)。例如应用在输入框(不同元素的原表示不同,所以这里只举例输入框)上,就是value属性和input事件的合写。

作用:提供数据的双向绑定

  1. 数据发生改变,页面会自动变:value
  2. 页面输入改变,数据会自动变@input

注意:$event用于在模板中,用于获取事件的形参

App.vue

<template><div class="app"><input type="text" v-model="msg1" /><br /><input type="text" :value="msg2" @input="msg2 = $event.target.value" /></div>
</template><script>
export default {data() {return {msg1: '',msg2: '',}},
}
</script><style>
</style>

表单类组件使用v-model简化绑定

  1. 父传子:数据由父组件props传递过来,v-model拆解绑定数据
  2. 子传父:监听输入,子传父传值给父组件修改

 父组件使用,子组件封装

化简前

化简后

  1. 子组件中,props通过value接收,事件触发input
  2. 父组件中,v-model给组件直接绑数据(:value+@input)
     

 

BaseSelect.vue

<template><div><select :value="value" @change="selectCity"><option value="101">北京</option><option value="102">上海</option><option value="103">武汉</option><option value="104">广州</option><option value="105">深圳</option></select></div>
</template><script>
export default {props: {value: String,},methods: {selectCity(e) {this.$emit('input', e.target.value)},},
}
</script><style>
</style>

App.vue

<template><div class="app"><BaseSelectv-model="selectId"></BaseSelect></div>
</template><script>
import BaseSelect from './components/BaseSelect.vue'
export default {data() {return {selectId: '102',}},components: {BaseSelect,},
}
</script><style>
</style>

main.js

javascript">import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')


http://www.ppmy.cn/embedded/32209.html

相关文章

MySQL 高级 - 第一章 | 字符集、大小写规范与sql_mode的合理设置

目录 前言一、字符集1.1 数据库中的默认字符集1.2 各级别的字符集1.3 字符集与比较规则1.4 字符集设置1.5 已有库表字符集变更1.6 请求到响应过程中字符集的变化 二、大小写规范2.1 Windows 和 Linux 平台区别2.2 Linux 下大小写规则设置2.3 SQL 编写建议 三、sql_mode 的合理设…

【前端】Layui的表格常用功能,表单提交事件,表格下拉按钮点击事件,表格外的按钮点击事件

欢迎来到《小5讲堂》 大家好&#xff0c;我是全栈小5。 这是《前端》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对知识点的理解和掌握…

BUUCTF:Web 解析(一)

前言 Buuctf Web 是一个在线安全挑战平台&#xff0c;旨在提高参与者对网络安全的理解和实践能力。本文将详细介绍 Buuctf Web 的特点、挑战和机遇&#xff0c;帮助读者更好地了解这一领域。 一、Buuctf Web 的特点 多样化的挑战场景&#xff1a;Buuctf Web 提供了多种挑战场…

MySQL数据库—初识数据库 | DDL语句 | DML语句

初识数据库 ____________________________________★_______________________________________ ▐ 为什么学习数据库&#xff1f; • 以前我们在程序中存储数据. 例如&#xff1a;一个变量&#xff0c;一个对象 ( 数据存储在内存中&#xff0c;程序运行结束后就销毁 ) • …

关于Clion开发stm32printf重定向问题简单解决问题方法

title: 关于Clion开发stm32printf重定向问题简单解决问题方法 tags: STM32Clion 参考来源1 这是另一种方法 在printf 重定向的基础上加上 一句 setbuf(stdout,NULL); 参考来源2 自己写的笔记啦

第IV章-Ⅰ Vue3组件与组件通信

第IV章-Ⅰ Vue3组件与组件通信 Vue组件根组件全局组件局部组件组件模板父子组件 组件间通信子组件获取父组件数据数据传递选项prop传值校验单向数据流 父组件获取子组件数据emit 方法 多级组件通信provide 声明要传递的数据inject 接收数据 总结应用场景单向数据流&#xff08;…

基于 V2G 技术的电动汽车实时调度策略

基于V2G技术的电动汽车实时调度策略,首先以降低充电成本和网损成本为目标,建立电动汽车调度模型。然后通过构建网损灵敏度指标分析电网节点性能,基于电网负荷制定分时电价,通过潮流计算和凸优化算法实时求解得到电动汽车充放电策略。最后以 IEEE 33 节点配电网为例验证了所…

深度学习之基于Unet肺部CT图像分割项目

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 肺部CT图像分割在医学诊断中占据重要地位&#xff0c;它有助于医生快速、准确地识别和分析肺部病变。…