defineEmits(['update:modelValue'])简单的demo

好的，我们来看一个简单的 demo，演示如何在子组件中触发 `update:modelValue` 事件，让父组件响应。

子组件代码：

<template>
  <div>
    <input type="text" :value="value" @input="updateValue($event.target.value)">
  </div>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  emits: ['update:modelValue'], // 声明自定义事件
  props: {
    value: {
      type: String,
      required: true
    }
  },
  methods: {
    updateValue(newValue) {
      this.$emit('update:modelValue', newValue); // 触发自定义事件
    }
  }
}
</script>

父组件代码：

<template>
  <div>
    <child-component v-model="text"></child-component>
    <p>文本框的值：{{ text }}</p>
  </div>
</template>

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

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

在子组件中，我们使用 `defineEmits` 声明了一个名为 `update:modelValue` 的自定义事件，并在 `updateValue` 方法中触发了该事件，将新的值传递给父组件。

在父组件中，我们使用了 `v-model` 指令将子组件的 `value` 属性绑定到父组件的 `text` 属性上。这样，当子组件触发 `update:modelValue` 事件时，父组件中的 `text` 属性就会被更新，从而实现了子组件和父组件之间的双向数据绑定。