vue3 v-model的使用

🙂博主：锅盖哒
🙂文章核心：vue3 v-model的使用

目录

前言

什么是v-model？

基本的v-model用法

自定义组件中的v-model

---

前言

当涉及到Vue.js 3的前端开发时，v-model是一个不可或缺的工具，它允许你在表单元素和组件之间建立双向数据绑定。在这篇博文中，我们将深入探讨v-model的使用，以及如何在Vue 3中充分发挥其威力。

---

什么是v-model？

v-model是Vue.js中的一个指令，它用于在表单元素和自定义组件之间创建双向数据绑定。这意味着当表单元素的值发生变化时，数据将自动更新，并且当数据发生变化时，表单元素的值也会相应地更新。

在Vue 3中，你可以使用v-model来处理各种表单元素，如文本框、单选按钮、多选框和下拉列表等。

---

基本的v-model用法

要使用v-model，首先确保你的Vue实例已经被正确初始化。然后，你可以在模板中的表单元素上使用v-model指令来绑定数据。

<template>
  <div>
    <input v-model="message" type="text">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

v-model将输入框的值与message属性进行了双向绑定。无论用户在输入框中键入什么，message属性都会自动更新，并且{{ message }}的文本也会实时更新。

---

自定义组件中的v-model

你还可以在自定义组件中使用v-model。要做到这一点，你需要正确配置组件的props和emits选项。

<template>
  <div>
    <custom-input v-model="message"></custom-input>
    <p>{{ message }}</p>
  </div>
</template>

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

export default {
  components: {
    CustomInput
  },
  data() {
    return {
      message: ''
    }
  }
}
</script>

custom-input组件被绑定到message属性。为了使v-model在自定义组件中生效，custom-input组件必须配置props和emits。

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

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

custom-input组件中的value prop 用于接收父组件中的message属性的值，而$emit('update:value', $event) 确保了当输入框的值发生变化时，父组件的message属性也会更新。

这就是Vue 3中v-model的使用方法。它使前端开发更加高效和便捷，特别是在处理表单元素和自定义组件时。希望这篇博文能帮助你更好地理解和运用v-model来提高你的Vue.js开发技能。

1.在子组件的 <template> 部分，你有一个输入框，通过 :value 属性将其值绑定到子组件内部的 value 属性。

<template>
  <input :value="value"  />
</template>

2.使用 @input 事件监听输入框的值变化，然后调用 updateValue 方法来更新 value 并触发 update:modelValue 事件，将新的值传递给父组件。

<template>
  <input :value="value" @input="updateValue" />
</template>

3.props 中接收名为 modelValue 的属性，这是v-model的默认值。

  props: ['modelValue'],

4.emits 中定义了一个事件名 update:modelValue，这是v-model的默认事件名。

  emits: ['update:modelValue'],

5.在 data 中创建一个 value 属性，初始值从 modelValue 中获取。

  data() {
    return {
      value: this.modelValue,
    };
  },

6.updateValue 方法用于更新 value 和触发 update:modelValue 事件，从而实现双向绑定。

  methods: {
    updateValue(newValue) {
      this.value = newValue;
      this.$emit('update:modelValue', newValue);
    },
  },

1.在父组件的 <template> 部分，你引入了子组件 <MyComponent> 并使用 v-model 将其与 parentValue 绑定在一起。

<template>
  <div>
    <MyComponent v-model="parentValue" />
    <p>Parent Value: {{ parentValue }}</p>
  </div>
</template>

2.你还显示了父组件的 parentValue 值，以便你可以看到数据的双向绑定效果。

  components: {
    MyComponent,
  },

3.在 data 中初始化了 parentValue。

  data() {
    return {
      parentValue: 'Hello from parent',
    };
  },