Vue组合式API：如何在<script setup>中使用context？

在<script setup>语法中，并没有直接对应传统setup函数里的context对象，而是将context包含的功能拆分成了独立的API，分别对应不同场景，具体用法如下：

• 触发事件（对应context.emit）：用defineEmits宏声明需要使用的事件，调用返回的函数即可触发事件。

  <script setup>
  // 声明要触发的事件列表
  const emit = defineEmits(['custom-event', 'update:modelValue'])
  
  // 触发自定义事件并传递参数
  emit('custom-event', 'hello from child')
  </script>
  

• 获取非Props属性（对应context.attrs）：用useAttrs钩子获取所有未被定义为Props的属性，返回的是响应式对象。

  <script setup>
  import { useAttrs } from 'vue'
  
  const attrs = useAttrs()
  // 访问比如id、class这类非Props属性
  console.log('组件的id属性：', attrs.id)
  </script>
  

• 访问插槽内容（对应context.slots）：用useSlots钩子获取当前组件的插槽信息，可用于访问默认或具名插槽的内容。

  <script setup>
  import { useSlots } from 'vue'
  
  const slots = useSlots()
  // 打印默认插槽的内容
  console.log('默认插槽内容：', slots.default())
  </script>
  

• 暴露内部属性给父组件（对应context.expose）：用defineExpose宏显式将组件内部的属性或方法暴露给父组件，父组件通过ref获取时才能访问到这些内容。

  <script setup>
  import { ref } from 'vue'
  
  const internalCount = ref(0)
  
  // 暴露internalCount给父组件
  defineExpose({
    internalCount
  })
  </script>
  

这些API完全覆盖了传统context对象的所有功能，是<script setup>语法下的标准替代方案。

内容的提问来源于stack exchange，提问作者mohammed albadry