【Vue.js 3.0】 emit(“update:modelValue“) 双向绑定

在Vue.js 3.0中，双向绑定可以通过v-model实现，但如果你需要手动触发更新父组件的值，可以使用emit('update:modelValue', value)。

以下是一个简单的示例，展示如何在子组件中更新父组件的数据。

父组件：

<template>
  <ChildComponent v-model="parentValue" />
</template>
 
<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  setup() {
    const parentValue = ref('initial value');
 
    return {
      parentValue
    };
  }
};
</script>

子组件：

<template>
  <input :value="modelValue" @input="updateParentValue($event.target.value)" />
</template>
 
<script>
import { defineComponent, toRefs } from 'vue';
 
export default defineComponent({
  props: {
    modelValue: String,
  },
  setup(props, { emit }) {
    const { modelValue } = toRefs(props);
 
    const updateParentValue = (value) => {
      emit('update:modelValue', value);
    };
 
    return { modelValue, updateParentValue };
  }
});
</script>

在这个例子中，子组件使用props接收modelValue，并通过emit('update:modelValue', value)更新父组件的值。当输入框的值改变时，updateParentValue函数会被调用，并且新的值会通过emit传递给父组件。