Vue Macros

简体中文

English

简体中文

English

外观

defineSlots ​

稳定性: 稳定

使用 defineSlots 可以在 <script setup> 中声明 SFC 中插槽的类型

在 Vue >= 3.3 中，此功能将默认关闭。

特性支持
Vue 3✅
Nuxt 3✅
Vue 2✅
Volar Plugin✅

基本用法 ​

简写语法 ​

vue
<script setup lang="ts">
defineSlots<{
  // 插槽名称
  title: {
    // 作用域插槽
    foo: 'bar' | boolean
  }
}>()
</script>
<script setup lang="ts">
defineSlots<{
  // 插槽名称
  title: {
    // 作用域插槽
    foo: 'bar' | boolean
  }
}>()
</script>

完整语法（官方版本） ​

vue
<script setup lang="ts">
defineSlots<{
  title: (scope: { text: string }) => any
}>()
</script>
<script setup lang="ts">
defineSlots<{
  title: (scope: { text: string }) => any
}>()
</script>

Volar 配置 ​

jsonc
// tsconfig.json
{
  "vueCompilerOptions": {
    "target": 3, // 或 2.7 用于 Vue 2
    "plugins": [
      "@vue-macros/volar/define-slots"
      // ...更多功能
    ]
  }
}
// tsconfig.json
{
  "vueCompilerOptions": {
    "target": 3, // 或 2.7 用于 Vue 2
    "plugins": [
      "@vue-macros/volar/define-slots"
      // ...更多功能
    ]
  }
}