跳到主要内容

访问 setup 上下文

2023年05月02日
柏拉文
越努力，越幸运

一、useSlots 接收与 slots 属性相同的值​

在 <script setup> 使用 slots 的情况应该是相对来说较为罕见的，因为可以在模板中直接通过 $slots来访问它们。在你的确需要使用它们的罕见场景中，可以分别用 useSlots 两个辅助函数。useSlots 是真实的运行时函数，它的返回与 setupContext.slots 等价。它们同样也能在普通的组合式 API 中使用。

<template>
  <div>
  </div>
</template>

<script setup lang="ts">
import { useSlots } from "vue"

const slots = useSlots();
console.log(slots);
</script>

二、useAttrs 接收与 attrs 属性相同的值​

在 <script setup> 使用 attrs 的情况应该是相对来说较为罕见的，因为可以在模板中直接通过 $attrs 来访问它们。在你的确需要使用它们的罕见场景中，可以分别用 useAttrs 两个辅助函数。useAttrs 是真实的运行时函数，它的返回与 setupContext.attrs 等价。它们同样也能在普通的组合式 API 中使用。

<template>
  <div>
  </div>
</template>

<script setup lang="ts">
import { useAttrs } from "vue"

const attrs = useAttrs();
console.log(attrs);
</script>

三、defineEmits 接收与 emits 属性相同的值​

在 <script setup> 可以使用 defineEmits 接收与 emits 属性相同的值。defineEmits 只能在 <script setup> 中使用的编译器宏。他们不需要导入，且会随着 <script setup> 的处理过程一同被编译掉。

<template>
  <div>
    <button @click="say">按钮</button>
  </div>
</template>

<script setup lang="ts">
import { defineEmits } from 'vue'

const emit = defineEmits(['say'])

const say = () => {
  emit('say', '哈哈哈')
}
</script>

四、defineExpose 接收与 expose 属性相同的值​

在 <script setup> 可以使用 defineExpose 暴露与 expose 相同的属性。defineExpose 只能在 <script setup> 中使用的编译器宏。他们不需要导入，且会随着 <script setup> 的处理过程一同被编译掉。

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>