vue的defineOptions组件

defineOptions是Vue3.3引入的一个Composition API辅助函数，用于在 <script setup>语法中定义组件的选项(options)。它允许你在<script setup >中以一种更加声明式的方式定义组件的名称、props、emits等配置项，而无需使用defineComponent。

基本用法

在<script setup >中,你可以使用 defineOptions 来定义组件的选项。以下是一个简单的示例：

<template>
    <div>
        <p>{{message}}</p>
    </div>
</template>
<script setup>
    import {defineOptions} from 'vue';

    defineOptions({
        name: 'MyComponent',
        props: {
            message: {
                type: String,
                required: true
            }
        },
        emits: ['update:message']
    })
</script>

解释

• defineOptions: 用于定义组件的选项
• name: 定义组件名称
• props: 定义组件的props
• emits: 定义组件的事件

详细说明

1. 定义组件名称

   使用defineOptions可以为组件指定一个名称

   defineOptions({
       name: 'MyComponent'
   })

2. 定义Props

   你可以使用 defineOptions 来定义组件的props

   defineOptions({
       props: {
           message: {
               type: String,
               required: true
           },
           count: {
               type: Number,
               default: 0
           }
       }
   })

demo

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script setup>
import { defineOptions, ref } from 'vue';

defineOptions({
  name: 'MyButton',
  props: {
    message: {
      type: String,
      required: true
    }
  },
  emits: ['update']
});

const handleClick = () => {
  // Emit an event
  emit('update');
};
</script>

原文