Vue.js组件开发-v-model如何实现数据双向绑定

在Vue.js组件开发中，实现v-model双向数据绑，v-model是Vue提供的一个指令，用于在表单输入元素（如<input>、<select>等）和组件上创建双向数据绑定。对于自定义组件，可以通过特定的方式来实现v-model的功能。

示例：

Vue 2.x

在Vue 2.x中，需要利用value属性（或其他选择的prop名）来接收父组件传递的数据，并通过input事件来通知父组件数据的变更。Vue 2.2.0+版本还允许通过model选项来自定义用于双向绑定的prop和事件。

Vue 2.x组件实现v-model双向数据绑定

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

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

这个示例中，自定义组件MyInput接收一个名为value的prop，并在内部将其绑定到<input>元素的value属性上。当<input>元素的值发生变化时，会触发input事件，进而调用onInput方法。onInput方法通过this.$emit向父组件发送一个名为input的自定义事件，并传递新的值作为参数。这样，父组件中的v-model就会接收到这个新值，并更新其绑定的数据。

Vue 3.x

在Vue 3.x中，实现v-model双向数据绑定的方式略有不同。需要使用v-bind的.sync修饰符（在Vue 3中已被移除，取而代之的是v-model的自定义修饰符）或者直接使用v-model的自定义实现。不过，Vue 3中的v-model也支持通过model-value属性和update:model-value事件来实现双向绑定。

Vue 3.x组件实现v-model双向数据绑定

<template>
  <input :model-value="modelValue" @update:model-value="onModelValueChange">
</template>

<script>
export default {
  name: 'MyInput',
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  emits: ['update:modelValue'],
  methods: {
    onModelValueChange(newValue) {
      this.$emit('update:modelValue', newValue);
    }
  }
};
</script>

这个Vue 3的示例中，自定义组件MyInput接收一个名为modelValue的prop，并在内部将其绑定到<input>元素的value属性上（注意这里使用的是:model-value而不是:value，因为Vue 3的v-model默认使用modelValue作为prop名）。当<input>元素的值发生变化时，会触发一个名为update:modelValue的事件，并传递新的值作为参数。父组件中的v-model会监听这个事件，并更新其绑定的数据。

注意：

在Vue 3中，也可以通过v-model的修饰符来自定义prop和事件名，例如使用v-model:custom来绑定一个名为custom的prop，并监听update:custom事件。可以更加灵活地实现双向数据绑定了。

原文地址：https://blog.csdn.net/michael_jovi/article/details/144741290

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！