自学内容网 自学内容网

vue3中 slot使用

默认插槽:

这是最基本的插槽类型,当没有指定 name 属性时,插槽是默认插槽。

子组件:

<template>
  <div class="child">
    <h2>子组件内容</h2>
    <slot></slot> <!-- 默认插槽,插入父组件传递的内容 -->
  </div>
</template>

父组件:

<template>
  <ChildComponent>
    <p>这是插入到默认插槽的内容</p>
  </ChildComponent>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent }
};
</script>

具名插槽:

具名插槽允许在组件中定义多个插槽,并在父组件中指定每个插槽的内容。

  • 子组件 ChildComponent 定义了两个具名插槽:headerfooter
  • 父组件通过 <template #header><template #footer> 向这些具名插槽传递内容。

子组件:

<template>
  <div class="child">
    <h2>子组件内容</h2>
    <slot name="header"></slot> <!-- 具名插槽 "header" -->
    <slot name="footer"></slot> <!-- 具名插槽 "footer" -->
  </div>
</template>

父组件:

<template>
  <ChildComponent>
    <template #header>
      <h3>这是插入到 header 插槽的内容</h3>
    </template>
    <template #footer>
      <p>这是插入到 footer 插槽的内容</p>
    </template>
  </ChildComponent>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent }
};
</script>

作用域插槽:

作用域插槽允许子组件将数据传递给父组件,并由父组件决定如何渲染这些数据。

  • 子组件 ChildComponent 使用作用域插槽向父组件传递 user 数据。
  • 父组件通过解构 { user } 接收并使用这些数据来渲染内容。

子组件:

<template>
  <div class="child">
    <slot :user="user"></slot> <!-- 作用域插槽,传递 `user` 数据 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: { name: 'Alice', age: 25 }
    };
  }
};
</script>

父组件:

<template>
  <ChildComponent>
    <template #default="{ user }"> <!-- 接收子组件传递的 `user` 数据 -->
      <p>用户名: {{ user.name }}</p>
      <p>用户年龄: {{ user.age }}</p>
    </template>
  </ChildComponent>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent }
};
</script>

动态插槽名:

动态插槽名允许根据运行时条件来决定使用哪个插槽。

  • 子组件 ChildComponent 接收一个 dynamicSlot 属性,动态决定使用哪个插槽。
  • 父组件可以通过改变 currentSlot 的值来切换显示的内容。

子组件:

<template>
  <div class="child">
    <slot :name="dynamicSlot"></slot> <!-- 动态插槽名 -->
  </div>
</template>

<script>
export default {
  props: ['dynamicSlot']
};
</script>

父组件:

<template>
  <ChildComponent :dynamicSlot="currentSlot">
    <template #slot1>
      <p>这是 slot1 的内容</p>
    </template>
    <template #slot2>
      <p>这是 slot2 的内容</p>
    </template>
  </ChildComponent>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      currentSlot: 'slot1' // 可以根据条件变更为 'slot2'
    };
  }
};
</script>

插槽默认类容:

如果父组件不提供内容,插槽可以显示默认内容。

  • 如果父组件没有向 ChildComponent 的默认插槽传递任何内容,那么子组件将显示默认内容 “这是插槽的默认内容”。

子组件:

<template>
  <div class="child">
    <slot>这是插槽的默认内容</slot> <!-- 默认内容 -->
  </div>
</template>

父组件:

<template>
  <ChildComponent>
    <!-- 没有插入任何内容时,显示子组件定义的默认内容 -->
  </ChildComponent>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent }
};
</script>


原文地址:https://blog.csdn.net/wj0712/article/details/140156371

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!