vue 3 中的defineModel 如何使用 代码示例

在Vue 3中，defineModel是一个用于定义组件模型的函数。它可以帮助我们更好地管理组件的props和emit。

使用defineModel的代码示例如下：

import { defineComponent, defineModel } from 'vue';

const MyComponent = defineComponent({
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  emits: ['update:value'],
  setup(props, { emit }) {
    const handleChange = (newValue) => {
      emit('update:value', newValue);
    };

    return {
      handleChange
    };
  }
});

export default defineModel({
  name: 'MyComponent',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  setup(props, { emit }) {
    const handleChange = (newValue) => {
      emit('update:value', newValue);
    };

    return {
      handleChange
    };
  }
});

在上面的示例中，我们首先使用defineComponent定义了一个普通的Vue组件MyComponent。然后，我们使用defineModel定义了一个具有相同功能的组件，并将其导出。

在使用这个组件时，我们可以像使用普通的Vue组件一样使用它，并且可以通过v-model指令来绑定value属性和handleChange方法。例如：

<template>
  <div>
    <MyComponent v-model="myValue" />
  </div>
</template>

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

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

这样，当MyComponent内部的值发生变化时，父组件中的myValue也会相应地更新。