vue双向绑定的原理和使用

04_vue双向绑定的原理和使用

思路

给出双向绑定的定义

双向绑定的好处

在哪里使用双向绑定

使用方式、使用细节、vue3变化

原理实现描述

vue中双向绑定是一个指令 v-model，当数据变化会影响视图，当视图变化会影响数据，通常还会配合trim lazy number使用

v-model是语法糖，默认情况下相当于 :value和@input。使用v-model可以大量减少繁琐的时间处理代码，提高开发效率

通常在表单项上使用v-model，还以在自定义组件上使用，表示某个值的输入和输出控制

若，则v-model收集的是value值，用户输入的内容就是value值

若，则v-model收集的是value值，且要给标签配置value属性

若，v-model的初始值是数组，那么收集的就是value组成的数组

        请选择校区
        北京
        上海
        深圳
        成都

data:{
	userInfo:{
		account:'',
		sex:'female',
		hobby:[],
		city:'beijing'
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在Vue.js 2中，sync 修饰符是用于实现父子组件之间双向绑定的一种语法糖。它主要用于简化子组件修改父组件数据的操作。

使用 sync 修饰符时，你需要在父组件中通过一个特殊的语法来传递一个名为 update:xxx 的 prop 给子组件。这里的 xxx 是你想要同步的父组件数据属性。

例如，假设你有一个父组件 Parent 和一个子组件 Child，你想要将父组件的 message 数据属性双向绑定到子组件。你可以这样做：

htmlCopy code



htmlCopy code



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

在父组件中，我们使用 :message.sync 将父组件的 message 数据属性传递给子组件。在子组件中，我们使用 input 元素来显示父组件传递的值，并通过 $emit 方法触发 update:message 事件来更新父组件的数据。

注意到我们在子组件的 @input 事件处理函数中使用了 $event.target.value 来获取输入框的值，并通过 $emit 方法将新的值传递给父组件。

这样，当子组件内部的输入框的值发生变化时，父组件的 message 数据属性也会随之更新，实现了双向绑定。

需要注意的是，使用 sync 修饰符会自动为你创建一个名为 update:xxx 的自定义事件，因此你需要在子组件中使用 $emit 来触发这个事件，以便通知父组件更新数据。

vue2和vue3v-model之间的差别

v-model 在 Vue2 和 Vue3 中的区别 - 掘金 (juejin.cn)