v-mode详解以及具体的使用示例

v-mode详解以及具体的使用示例

• • 基本用法
  • 高级用法
  • • 自定义修饰符
    • 自定义事件
    • [组件上使用 `v-model`](#组件上使用 v-model)
  • 原理&默认

v-model 是 Vue.js 中的一个指令，用于创建表单输入和应用状态之间的双向数据绑定。它可以用在表单输入、选择框、单选按钮等元素上，实现数据的实时同步。

基本用法

在基本用法中，v-model 指令可以用在以下三种类型的表单输入元素上：

• <input>
• <textarea>
• <select>

在这些元素上使用 v-model 指令，可以将其值与一个数据属性进行双向绑定。例如：

<div id="app">
  <p>Message is: {{ message }}</p>
  <input v-model="message">
</div>

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});

app.mount('#app');

在这个例子中，我们使用 v-model 指令将 <input> 元素的值与 message 数据属性进行了双向绑定。当用户在输入框中输入文本时，message 的值将会实时更新，反之亦然。

高级用法

在高级用法中，v-model 指令可以用在以下几种情况下：

• 自定义修饰符
• 自定义事件
• 组件上使用 v-model

自定义修饰符

在 v-model 指令中，可以使用修饰符来修改其默认行为。例如：

• .lazy：在输入框失去焦点或用户按下回车键时，才会更新数据。
• .number：将用户输入的值自动转换为数字类型。
• .trim：自动去除用户输入的首尾空格。

例如：

<div id="app">
  <p>Message is: {{ message }}</p>
  <input v-model.lazy="message">
  <input v-model.number="age">
  <input v-model.trim="name">
</div>

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!',
      age: 0,
      name: ''
    };
  }
});

app.mount('#app');

在这个例子中，我们使用了 .lazy、.number 和 .trim 三个修饰符，分别修改了 v-model 指令的默认行为。

自定义事件

在某些情况下，我们需要在数据更新时触发自定义事件，可以使用 v-model 指令的自定义事件功能。例如：

<div id="app">
  <p>Message is: {{ message }}</p>
  <input v-model="message" @input="onInput">
</div>

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    onInput(event) {
      console.log(event.target.value);
    }
  }
});

app.mount('#app');

在这个例子中，我们在 <input> 元素上同时使用了 v-model 指令和 @input 事件监听器。当用户在输入框中输入文本时，message 的值将会实时更新，同时也会触发 onInput 方法。

组件上使用 v-model

在自定义组件中，我们可以使用 v-model 指令来实现与父组件的双向数据绑定。例如：

<div id="app">
  <p>Message is: {{ message }}</p>
  <my-input v-model="message"></my-input>
</div>

const MyInput = {
  props: ['modelValue'],
  template: `
    <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
  `
};

const app = Vue.createApp({
  components: {
    MyInput
  },
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});

app.mount('#app');

在这个例子中，我们定义了一个名为 MyInput 的自定义组件，并在其中使用了 v-model 指令。在组件中，我们使用了 props 和 $emit 来实现与父组件的双向数据绑定。当用户在输入框中输入文本时，message 的值将会实时更新，反之亦然。

原理&默认

组件中使用 v-model 的原理是：父组件将一个值传递给子组件的 props 属性，子组件通过 $emit 方法触发一个自定义事件，将新值传递回父组件。父组件接收到新值后，更新数据，从而实现双向绑定。

在组件中使用 v-model 时，需要在组件中定义一个 model 选项，该选项用于指定 v-model 绑定的 prop 和事件。model 选项是一个对象，包含以下两个属性：

• prop：用于指定绑定的 prop 名称，默认为 value。
• event：用于指定触发更新的事件名称，默认为 input。

例如，在一个自定义的输入框组件中，我们可以这样使用 v-model：

<template>
  <input :value="value" @input="$emit('input', $event.target.value)">
</template>

<script>
export default {
  props: ['value'],
  model: {
    prop: 'value',
    event: 'input'
  }
}
</script>

在这个例子中，我们在组件中定义了一个 value prop，用于接收父组件传递过来的值。同时，我们在组件中定义了一个 model 选项，指定了 prop 为 value，event 为 input。这意味着，当用户在输入框中输入内容时，组件会触发一个 input 事件，并将新值通过 $emit 方法传递回父组件。父组件接收到新值后，更新数据，从而实现双向绑定。

在父组件中使用该组件时，可以这样使用 v-model：

<template>
  <div>
    <p>Message is: {{ message }}</p>
    <my-input v-model="message"></my-input>
  </div>
</template>

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

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

在这个例子中，我们在父组件中使用了 v-model 指令，将 message 数据绑定到了 my-input 组件上。当用户在输入框中输入内容时，组件会触发一个 input 事件，并将新值传递回父组件。父组件接收到新值后，更新 message 数据，从而实现双向绑定。

需要注意的是，在组件中使用 v-model 时，必须在组件中定义 model 选项，否则 v-model 不知道应该绑定到哪个 prop 和事件上。同时，在父组件中使用 v-model 时，必须将子组件的值绑定到一个数据属性上，否则无法实现双向绑定。

总之，组件中使用 v-model 可以实现组件和父组件之间的双向数据绑定，原理是通过 props 和事件来实现的。在组件中使用 v-model 时，需要定义 model 选项，指定绑定的 prop 和事件。在父组件中使用 v-model 时，需要将子组件的值绑定到一个数据属性上，从而实现双向绑定。