当前位置：首页 > article >正文

《Vue零基础入门教程》第二十二课：具名插槽

article 2025/1/12 6:14:14

往期内容

《Vue零基础入门教程》第十四课：列表渲染

《Vue零基础入门教程》第十五课：样式绑定

《Vue零基础入门教程》第十六课：计算属性

《Vue零基础入门教程》第十七课：侦听器

《Vue零基础入门教程》第十八课：计算属性 VS 侦听器

《Vue零基础入门教程》第十九课：组件式开发简介

《Vue零基础入门教程》第二十课：父子组件间通信(重点掌握)

《Vue零基础入门教程》第二十一课：深入组件

作用

如果需要同时使用多个插槽, 就需要给插槽取名字.

就好比: 主板上同时有 CPU 槽和内存槽, 如何区分这两个插槽, 不至于把内存插到 CPU 中

当然, 现实中肯定不会, 但是程序中就需要使用名字区分开

示例

在子组件中, 定义具名插槽
在引用子组件时, 通过slot属性指定要替换的插槽

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <computer>
        <div>这是一个电脑</div>
        <!-- v-slot:插槽的名字 -->
        <template v-slot:cpu>
          <div>这里放CPU的</div>
        </template>
        <template v-slot:memery>
          <div>这里放内存的</div>
        </template>
        这里的内容会被插入到默认插槽中
      </computer>
    </div>

    <script>
      const { createApp } = Vue

      const vm = createApp({
        components: {
          computer: {
            // 1. 在子组件中, 预留slot插槽
            template: `<div>
              <slot name="default"></slot>
              <slot name="cpu"></slot>
              <slot name="memery"></slot>
            </div>`,
          },
        },
      }).mount('#app')
    </script>
  </body>
</html>

没有指定template的内容会全部放到<slot>中, 也就是默认插槽<slot name="default">

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <computer>
        <div>这是一个电脑</div>
        <!-- v-slot:插槽的名字 -->
        <template v-slot:cpu>
          <div>这里放CPU的</div>
        </template>
        <template v-slot:memery>
          <div>这里放内存的</div>
        </template>
        这里的内容会被插入到默认插槽中
      </computer>
    </div>

    <script>
      const { createApp } = Vue

      const vm = createApp({
        components: {
          computer: {
            // 1. 在子组件中, 预留slot插槽
            template: `<div>
              <slot name="default"></slot>
              <slot name="cpu"></slot>
              <slot name="memery"></slot>
            </div>`,
          },
        },
      }).mount('#app')
    </script>
  </body>
</html>

查看全文

http://www.kler.cn/a/430048.html