该如何用useSlots() 和 useAttrs() 替代useContext()呢？

[Michael]

最近一个vue版本中有这样一个提示：
useContext() has been deprecated and will be removed in the next minor release. Use useSlots() and useAttrs() instead.

我当前用在父子组件间的调用，用法是这样：

const ctx = useContext()
const msb = () => {
  ctx.emit('update:msb')
}

我在网上没找到相关说明，该如何用useSlots() 和 useAttrs()呢

[chengpeiquan]

果然是实验性的 API ，还没正式启用就弃用了……我去瞅瞅新的变化~

[chengpeiquan]

最近一段时间比较忙没怎么关注 3.0 的进展，script-setup 变化还挺大的，我回头再更新一下文档~

关于这 2 个 API，用法是这样：

---

useAttrs 可以直接拿到非 props 的数据

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

const attrs = useAttrs()

// 打印所有的attrs
console.log(attrs);

// 只打印某个attr
console.log(attrs.msg);
</script>

如果没有指定为 props，那么父组件传进来的属性都会挂到 attrs 这边来，就可以通过这个方法拿到了

---

useSlots 目前推测应该是提供给 JSX / TSX 用的，用法比如：

父组件如果是像这样传入了插槽数据

<template>
  <ChildTSX>
    <p>I am a default slot from TSX.</p>
    <template #msg>
      <p>I am a msg slot from TSX.</p>
    </template>
  </ChildTSX>
</template>

<script setup lang="ts">
import ChildTSX from '@cp/context/Child.tsx'
</script>

那么在 JSX / TSX 的子组件，通过 useSlots 来获取父组件传进来的 slots

import { defineComponent, useSlots } from 'vue'

const ChildTSX = defineComponent({
  setup() {
    const slots = useSlots()
    return () => (
      <div>
        <p>{ slots.default ? slots.default() : '' }</p>
        <p>{ slots.msg ? slots.msg() : '' }</p>
      </div>
    );
  },
});

export default ChildTSX;