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组成的数组

<input type="text" v-model.trim="userInfo.account">
<input type="radio" name="sex" v-model="userInfo.sex" value="male">
<input type="radio" name="sex" v-model="userInfo.sex" value="female">
<input type="checkbox" v-model="userInfo.hobby" value="study">
<input type="checkbox" v-model="userInfo.hobby" value="game">
<input type="checkbox" v-model="userInfo.hobby" value="eat">
<select v-model="userInfo.city">
        <option value="">请选择校区</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="shenzhen">深圳</option>
        <option value="wuhan">成都</option>
</select>
data:{
	userInfo:{
		account:'',
		sex:'female',
		hobby:[],
		city:'beijing'
	}
}

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

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

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

htmlCopy code<!-- Parent.vue -->
<template>
  <div>
    <Child :message.sync="message" />
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  data() {
    return {
      message: 'Hello'
    };
  }
};
</script>
htmlCopy code<!-- Child.vue -->
<template>
  <div>
    <input type="text" :value="message" @input="$emit('update:message', $event.target.value)" />
  </div>
</template>

<script>
export default {
  props: ['message']
};
</script>

在父组件中，我们使用 :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)