首页 前端知识 Vue3:插槽(slot,useSlots,useAttrs)

Vue3:插槽(slot,useSlots,useAttrs)

2024-06-02 09:06:56 前端知识 前端哥 149 777 我要收藏

1.插槽 

       1. 组件FancyButton

  <FancyButton>
          Click me! <!-- 插槽内容 -->
  </FancyButton>

        2.组件FancyButton的模板是这样的 

<button class="fancy-btn">
  <slot></slot> <!-- 插槽出口 -->
</button>
 

<slot> 元素是一个插槽出口 (slot outlet),标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。 

        3.渲染DOM

<button class="fancy-btn">Click me!</button>
 

2.defineExpose

使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例,不会暴露任何在 <script setup> 中声明的绑定。

可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性:

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

const a = 1
const b = ref(2)

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

 

  当父组件通过模板引用的方式获取到当前组件的实例,获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)  

3.useSlots() 和 useAttrs()

  在 <script setup> 使用 slots 和 attrs 的情况应该是相对来说较为罕见的,因为可以在模板中直接通过 $slots 和 $attrs 来访问它们。在你的确需要使用它们的罕见场景中,可以分别用 useSlots 和 useAttrs 两个辅助函数:

<script setup>

import { useSlots, useAttrs } from 'vue'

const slots = useSlots()

const attrs = useAttrs()

</script>      

  useSlots 和 useAttrs 是真实的运行时函数,它的返回与 setupContext.slots 和 setupContext.attrs 等价。它们同样也能在普通的组合式 API 中使用。

 

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10542.html
标签
评论
发布的文章

无涯教程-HTML5 - 表单标签

2024-06-08 00:06:06

HTML5基础2

2024-06-07 23:06:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!