2024年6月2日发(作者：)
vue v-model双向绑定原理
一、简介
v-model实现双向绑定的语法糖，常用于表单与组件之间的数据
双向绑定.
二、表单实现双向绑定
1. 原理 分两步骤 v-bind绑定一个value属性 v-on指令给当前
元素绑定input事件 可看出v-model绑定在表单上时，v-model其实
就是v-bind绑定value和v-on监听input事件的结合体
v-model = v-bind:value + v-on:input
2. 实现 用v-bind:value + v-on:input来模拟实现v-model
$" />
例子解释： 通过 v-bind:value 绑定 username 变量，每次输入
内容的时候触发input事件 通过事件对象参数 获
得输入的内容，并且把这个内容赋值给username 此时更改username
时input输入框会变化，更改input输入框时username变量会变，从
而实现了v-model的双向绑定功能
三、组件上的双向绑定
1. 原理
v-model绑定在组件上的时候做了以下步骤 在父组件内给子组
件标签添加 v-model ，其实就是给子组件绑定了 value 属性 子组件
内使用 prop 创建 创建 value 属性可以拿到父组件传递下来的值，
名字必须是 value。 子组件内部更改 value 的时候，必须通过 $emit
派发一个 input 事件，并携最新的值 v-model 会自动监听 input 事
件，把接收到的最新的值同步赋值到 v-model 绑定的变量上
2. 实现
父组件操作
<子组件标签 v-model="父组件定义的变量值 />
子组件操作
子组件库存:{{ value }}
// 这样后每次点击按钮的时候，库存就会加1，并且把变更后的
值传递给父组件 // 父组件 v-model 绑定的变量就会改变
3. 实例
父组件
//v-model绑定值
//uploadimg: 自定义的组件， v-model：双向绑定
子组件（图片上传组件）
//1.定义props value来接收父组件传入的图片地址
props: {
// 父组件传递过来的v-model对应的值
value: { type: String, default: '' }
},
//2.直接用value来显示图片
//3.在子组件图片上传成功之后，this.$emit(‘input’, 新地址)，
抛给父组件，达到更新父组件中v-model绑定数据项
const imageUrl = `${on}`
this.$emit('input', imageUrl)
发布者：admin，转转请注明出处：http://www.yc00.com/web/1717328368a2737043.html
评论列表（0条）