在 `<script setup>` 中驾驭 `name` 和 `inheritAttrs`：掌握精简组件定义技巧

在 <script setup> 中掌握 name 和 inheritAttrs 的使用技巧

背景

Vue.js 中的 <script setup> 语法糖使你能够精简地编写组件逻辑，但在直接定义 name 和 inheritAttrs 属性方面却遇到了障碍。这两个属性通常在 <script> 中使用 defineComponent 选项 API 进行定义。

问题解决：拥抱 defineProps 和 defineEmits

虽然 <script setup> 本身不支持 name 和 inheritAttrs，但你可以借助 defineProps 和 defineEmits 来实现类似的效果。

定义 name：让组件拥有明确的身份

name 属性用于赋予组件一个独特的名字。在 <script setup> 中，你可以使用 defineProps 中的 name 选项来指定组件名称：

<script setup>
const { defineProps } = Vue

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
})
</script>

控制 inheritAttrs：取舍组件继承性

inheritAttrs 属性决定组件是否继承其父级的未知属性。在 <script setup> 中，使用 defineEmits 中的 attrs 选项来控制这一行为：

<script setup>
const { defineEmits } = Vue

const emits = defineEmits(['update:modelValue'])
</script>

在这个示例中，组件不会继承任何未知的父级属性，因为 attrs 选项未被指定。

小结：殊途同归

虽然 <script setup> 中没有 name 和 inheritAttrs 的直接定义方法，但通过巧妙地利用 defineProps 和 defineEmits，你可以获得相同的功能，让你的组件在 Vue.js 生态系统中游刃有余。

常见问题解答

1. 在 <script setup> 中定义 name 的目的是什么？

   • 为组件提供一个识别标识符，用于引用和动态组件渲染。

2. 如何让组件继承父级属性？

   • 省略 defineEmits 中的 attrs 选项，允许组件无条件继承所有父级属性。

3. 为什么 <script setup> 中没有 name 和 inheritAttrs 的直接定义？

   • 为了精简语法，将重点放在组件逻辑和模板上。

4. 除了 defineProps 和 defineEmits，还有其他方法可以在 <script setup> 中控制组件名称和继承性吗？

   • 否，这些是唯一可用的方法。

5. 使用 <script setup> 来定义组件的利弊是什么？

   • 优点： 简洁的语法，更好的代码组织。
   • 缺点： 可能会导致更复杂的依赖关系注入，并且与传统选项 API 的兼容性有限。