Vue3 useSlots() および useAttrs()

useSlots() および useAttrs()
1. スロットと属性の取得
注: useContext API は非推奨となり、
useContext を通じてコン​​テキストからスロットと属性を取得できる、より細分化された API に置き換えられます。ただし、提案が正式に可決された後、この構文は廃止され、useAttrs と useSlots に分割されました。
1. useAttrs: 名前が示すように、これは属性データを取得するために使用されますが、クラス、属性、メソッドが含まれる VUE2 とは異なります。

<template>
  <component v-bind="attrs"></component>
</template>  
<srcipt setup lang='ts'>
  const attrs = useAttrs();
<script>

2. useSlot: 名前が示すように、スロット データを取得します。
使用例:

// 旧
<script setup>
   import { useContext } from 'vue'
   const {slot,attrs} = useContext()
</script>

//新
<script setup>
    import { useAttrs, useSlots } from 'vue'
    const attrs = useAttrs()
    const slots = useSlots()
</script>

その他のフック API
1. useCSSModule: CSS モジュールは、CSS のモジュール化と組み合わせのシステムです。vue-loader は CSS モジュールを統合しており、シミュレートされたスコープ付き CSS として使用できます。単一ファイル コンポーネントのセットアップ内で CSS モジュールへのアクセスを許可します。私はこの API をあまり使用しませんが、もっと紹介します。
2. useCssVars: この API には一時的に比較的少ない情報が含まれます。スタイルに v-bind を導入するときに言及されます。
3. useTransitionState: この API には一時的に比較的少ない情報が含まれます。
4. useSSRContext: この API には一時的に比較的少ない情報が含まれます。