双向绑定那点事鹅

v-model和.sync的区别

v-model:

v-model 是 Vue.js 框架中的一个指令，用于在表单元素（如输入框、复选框、单选按钮等）和组件之间建立双向绑定。它是 Vue.js 中常用的一个语法糖，可以简化数据的处理和状态同步

v-model 本质上是通过事件监听和属性绑定实现双向绑定，因此它只能应用于支持 input 事件或 change 事件的表单元素上或组件上。

1,使用v-bind绑定了value

2,使用v-on监听了input/change事件,将最新的value赋给变量

v-model.trim---去空格

v-model.number---转number类型

.sync修饰符

作用:实现子组件与父组件数据的双向绑定

特点:prop属性名,可以自定义,非固定value

本质: :属性名 ,@updata:属性名的和写

父组件：

<template>
  <div>
    <p>父组件: {{ message }}</p>
    <ChildComponent :childMessage.sync="message"></ChildComponent>
  </div>
</template>
​
<script>
import ChildComponent from './ChildComponent.vue';
​
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello'
    };
  }
};
</script>

子组件（ChildComponent）：

<template>
  <div>
    <p>子组件: {{ childMessage }}</p>
    <button @click="updateMessage">修改父组件的值</button>
  </div>
</template>
​
<script>
export default {
  props: {
    childMessage: String
  },
  methods: {
    updateMessage() {
      this.$emit('update:childMessage', 'New Message');
    }
  }
};
</script>

注:在 Vue 3 中，.sync 修饰符已被废弃，取而代之的是 v-model 和 emit 的结合使用。

v-model的局限性:

1. 数据名必须叫value
2. 事件名必须叫input
3. 一个标签只能使用一次v-model

解决:v-model局限性------.sync修饰符

异同:

同:v-model 和 .sync 修饰符都用于实现父子组件之间的双向绑定

差异:

1. 语法差异:

• v-model 是一个指令，一般用于表单元素（如输入框、复选框、单选按钮等）或组件上，通过指令绑定一个值来实现双向绑定。
• .sync 是一个修饰符，一般用于组件的 prop 上，通过.sync 修饰符来简化父子组件之间的双向绑定。

2. 使用方式差异

3. 实现细节差异:

• v-model 隐含着在父子组件之间传递了一个名为 value 的 prop，以及一个名为 input 的事件。在子组件内部，通过接收 value prop，并在适当的时候触发 input 事件来更新父组件数据。
• .sync 修饰符则需要手动定义一个名为 ${propName}.sync 的 prop（其中 ${propName} 是实际的 prop 名称），然后在子组件内通过 $emit('update:${propName}', value) 来触发一个名为 update:${propName} 的事件来更新父组件数据。