vue2指令

vue2指令

v-model 的工作原理，它如何在表单输入和应用状态之间创建双向绑定

v-model 是 Vue 中一个特殊的指令，用于在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它根据控件类型自动选取正确的方法来更新元素。v-model 本质上是语法糖，在不同的输入元素上有着不同的工作方式。

工作原理：

对于不同的输入类型，v-model 背后做了不同的事情：

• 文本输入框（<input>）、文本区域（<textarea>）: v-model 监听 input 事件，并在事件触发时更新数据。同时，它也绑定了元素的 value 属性以匹配 Vue 实例数据。这样，数据的变化会立即反映到输入框中，而输入框的变化也会立即更新到数据中。
• 单选按钮（<input type="radio">）: v-model 绑定了 radio 输入的 checked 属性，并监听 change 事件来更新数据。
• 复选框（<input type="checkbox">）: 对于单个复选框，v-model 绑定了 checked 属性并监听 change 事件。对于具有相同 v-model 的多个复选框，它会将绑定的数据作为数组处理，选中和取消选中将自动添加或移除相应的值。
• 下拉选择框（<select>）: v-model 绑定了 select 元素的 value 属性，并在 change 事件发生时更新数据。对于多选的 select（即带有 multiple 属性的），绑定的数据会以数组形式处理。

双向绑定：

v-model 实现双向绑定的方式是结合了 v-bind 和 v-on 指令的功能。v-bind 负责将数据绑定到视图上，而 v-on 负责监听用户的输入事件来更新数据。

• 数据到视图: 当你在数据中进行更改时，v-model 会将这些更改反映到视图上，通过 v-bind 自动更新对应的属性值。
• 视图到数据: 当用户在输入字段中输入时，v-model 会监听 input、change 或其他适当的事件，并根据用户的输入更新数据。这通常是通过 v-on 实现的。

示例：

<template>
  <input v-model="message" placeholder="Edit me">
</template>

<script>
export default {
     
  data() {
     
    return {
     
      message: 'Hello Vue!'
    };
  }
};
</script>

在这个例子中，v-model 绑定了 input 元素的 value 属性并监听了 input 事件。当用户在输入框中输入文字时，message 数据属性会被更新，同时如果 message 属性在其他地方被改变，输入框的内容也会相应更新。

vue2自定义组件中的 v-model

在Vue 2中，自定义组件也可以使用 v-model 指令来实现双向绑定。默认情况下，v-model 在组件上会利用名为 value 的 prop 和名为 input 的事件，但你可以通过设置组件的 model 选项来修改这些默认的 prop 和事件名。

以下是如何在自定义组件中使用 v-model 的基本步骤：

1. 在组件内声明一个 prop:
   • 通常，这个 prop 被命名为 value，这样它可以与 v-model 的默认行为相匹配。
2. 在组件内触发一个事件:
   • 当需要通知父组件更新数据时，你应该在组件内部触发一个名为 input 的事件，并传递新的值作为事件的参数。
3. 在父组件中使用 v-model:
   • 在父组件的模板中，使用 v-model 绑定到自定义组件上，就像绑定到普通的 <input> 标签一样。

下面是一个自定义组件使用 v-model 的示例：

// ChildComponent.vue
<template>
  <input
    :value="value"
    @input="onInput"
  >
</template>

<script>
export default {
     
  props: ['value'],
  methods: {
     
    onInput(event) {
     
      this.$emit('input', event.target.value);
    }
  }
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-component v-model="childValue"></child-component>
  </div>
</template>

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

export default {
     
  components: {
     
    ChildComponent
  },
  data() {
     
    return {
     
      childValue: 'Initial value'
    };
  }
};
</script>

在这个例子中，ChildComponent 接受一个 value prop，并在用户输入时触发一个 input 事件。ParentComponent 通过 v-model 将其数据属性 childValue 绑定到 ChildComponent 上。当用户在子组件的输入框中输入时，子组件会触发 input 事件，并将新值传递给父组件，父组件随后更新 childValue。

如果你想自定义在子组件中使用的 prop 和事件名称，可以在子组件中添加 model 选项：

// CustomModelComponent.vue
<template>
  <input
    :value="modelValue"
    @input="updateValue"
  >
</template>

<script>
export default {
     
  model: {
     
    prop: 'modelValue',
    event: 'update'
  },
  props: ['modelValue'],
  methods: {
     
    updateValue(event) {
     
      this.$emit('update', event.target.value);
    }
  }
};