useSlots跟useAttrs

这2个方法不经常使用,当时在封装组件的时候会比较经常用到。

作用

useSlots 获取子组件的插槽内容 useAttrs 获取子组件的属性 示例地址

app.vue

<script setup lang="ts">
import Comp from './Comp.vue';
</script>

<template>
  <Comp name="comp" age="18">
     <template #header="{name}">
      渲染成功: {{name}}
     </template>
  </Comp>
</template>

Comp.vue

<script setup lang="ts">
import {useAttrs,useSlots} from 'vue'
 //获取props 会拦截属性
defineProps(['name'])
//拿到组件的slots
const slots=useSlots()
const attrs=useAttrs()
const renderTest=slots.header
</script>

<template>
 <div>
  <slot name="header"  v-bind="{name:'普通用slot渲染'}" />
  </div>
  <div>
  <component :is="slots.header" name="用compnent渲染" />
  </div>
  <div>
    <renderTest name="直接渲染" />
  </div>
  {{attrs}}
  props:{{name}}
</template>