子组件如何通过v-model实现数据的双向绑定

在 Vue 中，v-model 是一种语法糖，用于在表单元素或者组件上实现双向数据绑定。

下面分别介绍在 Vue 2 和 Vue 3 里子组件使用 v-model 实现数据双向绑定的具体方式。

Vue 2 中使用 v-model 实现双向绑定

在 Vue 2 里，v-model 本质上是 :value 和 @input 的语法糖。子组件需要接收 value 属性，并在数据变化时触发 input 事件。

父组件示例

<template>
  <div>
    <!-- 父组件数据 -->
    <p>父组件的值: {{ parentData }}</p>
    <!-- 使用 v-model 绑定到子组件 -->
    <ChildComponent v-model="parentData" />
  </div>
</template>

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

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

子组件示例

<template>
  <div>
    <!-- 绑定输入框的值到 value 属性 -->
    <input :value="value" @input="updateValue($event.target.value)" />
  </div>
</template>

<script>
export default {
  // 接收父组件传来的 value 属性
  props: ['value'],
  methods: {
    updateValue(newValue) {
      // 触发 input 事件，将新值传递给父组件
      this.$emit('input', newValue);
    }
  }
};
</script>

代码解释

• 父组件：使用 v-model 把 parentData 绑定到 ChildComponent 上。
• 子组件：
  • 通过 props 接收 value 属性，用于显示输入框的值。
  • 当输入框的值发生变化时，调用 updateValue 方法，在该方法里使用 $emit('input', newValue) 触发 input 事件，将新值传递给父组件。

Vue 3 中使用 v-model 实现双向绑定

在 Vue 3 中，v-model 对应的 prop 默认是 modelValue，事件是 update:modelValue。同时，使用 <script setup> 语法糖可以让代码更简洁。

父组件示例

<template>
  <div>
    <!-- 父组件数据 -->
    <p>父组件的值: {{ parentData }}</p>
    <!-- 使用 v-model 绑定到子组件 -->
    <ChildComponent v-model="parentData" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 定义响应式数据
const parentData = ref('');
</script>

子组件示例（使用 <script setup>）

<template>
  <div>
    <!-- 绑定输入框的值到 modelValue -->
    <input :value="modelValue" @input="updateValue($event.target.value)" />
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

// 定义 props 接收 modelValue
const props = defineProps(['modelValue']);
// 定义可以触发的事件
const emits = defineEmits(['update:modelValue']);

const updateValue = (newValue) => {
  // 触发 update:modelValue 事件，将新值传递给父组件
  emits('update:modelValue', newValue);
};
</script>

代码解释

• 父组件：使用 v-model 把 parentData 绑定到 ChildComponent 上。
• 子组件：
  • 使用 defineProps 接收 modelValue 属性。
  • 使用 defineEmits 定义 update:modelValue 事件。
  • 当输入框的值发生变化时，调用 updateValue 方法，在该方法里使用 emits('update:modelValue', newValue) 触发事件，将新值传递给父组件。

多 v-model 绑定（Vue 3.4+）

Vue 3.4 及以上版本支持多个 v-model 绑定，允许子组件同时处理多个双向绑定的数据。

父组件示例

<template>
  <div>
    <p>父组件的标题: {{ title }}</p>
    <p>父组件的内容: {{ content }}</p>
    <!-- 使用多个 v-model 绑定到子组件 -->
    <ChildComponent v-model:title="title" v-model:content="content" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const title = ref('');
const content = ref('');
</script>

子组件示例（使用 <script setup>）

<template>
  <div>
    <input :value="title" @input="updateTitle($event.target.value)" />
    <textarea :value="content" @input="updateContent($event.target.value)" />
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

// 定义 props 接收多个 v-model 的值
const props = defineProps(['title', 'content']);
// 定义可以触发的事件
const emits = defineEmits(['update:title', 'update:content']);

const updateTitle = (newTitle) => {
  emits('update:title', newTitle);
};

const updateContent = (newContent) => {
  emits('update:content', newContent);
};
</script>

通过以上方式，就能在子组件中使用 v-model 实现数据的双向绑定，无论是 Vue 2 还是 Vue 3 都能根据具体需求灵活运用。