Vue3.3 的 defineOptions 的使用，方便在 setup 语法糖中为组件命名和控制父子属性透传，包含在线运行实例欧

defineOptions 是 Vue3.3 的新的宏，可以通过 defineOptions 宏在 <script setup> 中使用选项式 API，也就是说可以在一个宏函数中设置 name, props, emits, render, 控制是否允许父子非 props 的属性透传等功能。

defineOptions 可以直接在 setup 语法糖 script 本中使用，自动默认导入。需要注意的是在 Vue >= 3.3 中，如果不使用 defineOptions，他是默认关闭的。

解决痛点：在 Vue3.3 之前如果使用的是<script setup> 想要设置选项式 API 的内容，需要在 vue 文件中另写一个非 setup 的<script >然后设置选项式 API，最后 Vue 文件在运行的时候会将两个脚本合并，但是 defineOptions 可以避免这个问题。

下面讲讲 defineOptions 的使用。文末会有 Vue 官网的演练场示例。点进去就可以查看示例，可以在线修改，折腾一下。

组件自定义名称

比如说开发中或者写组件库代码的时候可能要自定义组件名，如果使用 defineOptions 的话在直接在<script setup> 中声明组件 name 选项，而不必新增单独的 <script> 块来声明 name 选项。

vue 3.3 之前需要写两个脚本块：

<script>
import { defineComponent } from "vue";
defineComponent({
  name: "MyComp" //声明组件name
});
</script>
<script setup>
//setup语法糖
</script>

vue 3.3 使用 defineOptions 宏：

<script setup>
defineOptions({
  name: "MyComp" //声明组件name
});
</script>

阻塞透传的非 props 属性

开发中我们可能需要阻止透传非 props 属性，比如我们希望组件的属性只允许在组件内部使用，而不是在父组件中透传。vue 3.3 提供了 inheritAttrs 选项，默认为 true，表示允许透传，设置为 false 表示不允许透传。通过 defineOptions 宏，我们可以在 <script setup> 中设置 inheritAttrs 选项，来阻止透传非 props 属性。

前置知识：透传属性，简而言之呢，就是默认父组件传递给子组件的属性都会透传到子组件的根元素上，通过设置 inheritAttrs 为 false，可以阻止透传，注意：这里是阻止透传非 props 属性。关于透传属性我会再写一篇文章，包含示例，敬请期待。

<script setup>
defineOptions({
  inheritAttrs: false //非props的属性默认不透传
});
</script>

比如说关闭从父组件给子组件添加内嵌的 style 属性。

示例：包含组件自定义名称和阻塞透传的非 props 属性

演示地址

不想打开的话这里直接贴上源码：
父组件：

<script setup>
import Comp from "./Comp.vue";
</script>

<template>
  <Comp :style="{ color: 'red' }" btnDisable>defineOptions演示</Comp>
</template>

子组件

<script setup>
defineOptions({
  name: "MyComp", //声明组件name
  inheritAttrs: false //非props的属性默认不透传
});
defineProps({
  btnDisable: Boolean
});
</script>

<template>
  <div>
    <slot />
    <button :disabled="btnDisable">test</button>
  </div>
</template>

实际运行效果：
在这里插入图片描述