slot插槽

    <!-- 插槽组件 -->
<section class="hello">
    <!-- 默认插槽,如果在使用组件时没有提供内容,将显示"Welcome" -->
    <slot>Welcome</slot>

    <!-- 具名插槽,名为"content"。这意味着当使用组件时,可以为这个插槽提供特定的内容 -->
    <slot name="content"></slot>
</section>

    <!-- 调用组件 -->
<Hello>
  <!-- 这部分内容将替换默认插槽的内容 -->
  123

    <!-- 使用 template 标签并指定 v-slot:content 来为具名插槽"content"提供内容 -->
  <template v-slot:content>
    1234
  </template>
</Hello>

    <!-- 插槽组件 -->
    <!-- 具名插槽,名为"footer"。此插槽还提供了额外的属性 foo 和 bar,这些属性可以在使用组件时被访问 -->
<slot name="footer" foo="for" :bar="number"></slot>

    <!-- 调用组件 -->
    <!-- 使用 template 标签并指定 v-slot:footer 来为具名插槽"footer"提供内容 -->
    <!-- slotProps 是一个对象,它包含了插槽提供的所有属性,这样我们就可以在模板中使用它们 -->
<template v-slot:footer="slotProps">
  <!-- 使用 slotProps.foo 和 slotProps.bar 来访问插槽提供的属性 -->
  {{slotProps.foo + '-' + slotProps.bar}}
</template>

posted on 2020-01-12 14:55  完美前端  阅读(449)  评论(0)    收藏  举报

导航