Vue 组件间的数据绑定

devtools/2024/9/23 4:31:26/

在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/devtools/32707.html

相关文章

第III章-ⅠVue3进阶语法

vue3进阶语法 setup 函数Vue方法计算属性及监听器methods方法 computed计算属性ref函数 watch 监听器Vue的表单绑定v-model实现表单绑定v-model修饰符 setup 函数 Vue 3 引入了组合式 API&#xff0c;其中核心是 setup 函数。这个函数是组件中所有 Composition API 特性的入口…

MySQL8.0版本在CentOS系统安装(2024最新版)

一&#xff1a;MySQL8.0版本在CentOS系统安装 安装 使用yum安装MySQL rpm -Uvh https://repo.mysql.com/mysql80-community-release-el7-3.noarch.rpmrpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2023yum install mysql-server安装完成后&#xff0c;启动MySQL并配…

快速了解Django:核心概念解析与实践指南

title: 快速了解Django&#xff1a;核心概念解析与实践指南 date: 2024/5/1 20:31:41 updated: 2024/5/1 20:31:41 categories: 后端开发 tags: Django核心路由系统视图系统ORM管理中间件Web框架登录装饰器 第一章&#xff1a;Django简介 背景和发展历程&#xff1a; Djan…

hadoop学习---基于Hive的教育平台数据仓库分析案例(一)

案例背景&#xff1a; 大数据技术的应用可以从海量的用户行为数据中进行挖掘分析&#xff0c;根据分析结果优化平台的服务质量&#xff0c;最终满足用户的需求。教育大数据分析平台项目就是将大数据技术应用于教育培训领域&#xff0c;为企业经营提供数据支撑。 案例数据产生流…

Django数据模型类(Model)字段属性类型

Django框架是用Python语言编写的&#xff0c;所以框架中的数据模型类Model也是Python类。 类django.db.models中的每个属性&#xff0c;对应数据库中的一个字段&#xff0c;所以属性类型就是数据库的字段类型。 Django为每个Model类设置一个自增id&#xff0c;即自增主键&…

screen命令

首先明确screen和bash终端有区别&#xff0c;如果不小心按了ctrlad会停止向屏幕输出&#xff0c;此时需要ctrlaq才能输出 一.新建屏幕 四种方法 其中一种是为该页面新创建一个进程 screen -dmS <页面名> 这种方法是为该页面新创建一个进程&#xff0c; 类似于开启另一个…

iPhone 16系列机模抢先曝光:MagSafe环更薄,摄像头布局揭晓

近日&#xff0c;法国知名媒体ShopSystem在其博客上独家发布了苹果iPhone 16系列四款机型的机模照片&#xff0c;为我们揭示了这款未来手机的诸多新特点。尤其值得关注的是MagSafe环的新设计和摄像头的布局。 尽管MagSafe环的尺寸保持不变&#xff0c;但其厚度相较于iPhone 15…