zoukankan      html  css  js  c++  java
  • 简述slot插槽

    vue中的插槽(slot),是组件当中的一块HTML模板。父组件决定插槽是否显示以及如何显示,不过显示位置由子组件决定,将插槽放在<template></template>中的哪个位置,模板就展示在哪个位置。

    1.默认插槽(无name属性,或称匿名插槽)

    示例:

    (父组件代码↓)

    <template>
        <div>
            <h3>我是一个父组件</h3>
            <!--子组件内容 ↓ -->
            <child>
               <div>
                    这里是子组件内容!
                </div>
            </child>
        </div>
    </template>

    (子组件代码↓)

    <template>
        <div>
            <h5>我是子组件</h5>
            <slot></slot>
        </div>
    </template>

    (效果↓)

    在上面例子中,父组件在<child></child>里面写了html模板,子组件的slot会被该模板覆盖掉!

    如果子组件具有多个匿名插槽(↓)

    <template>
        <div>
            <h5>我是子组件</h5>
            <slot></slot>
            <slot></slot>
            <slot></slot>
            <slot></slot>
        </div>
    </template>

    效果(↓)

    2.具名插槽(将slot标签上加入name属性)

    示例:

    (父组件代码↓)

    <template>
      <div>
        <h3>我是一个父组件</h3>
        <!--子组件内容 ↓ -->
        <child>
          <div slot="index1">这里是子组件111111</div>
          <div slot="index2">这里是子组件22222222</div>
          <div>这里是匿名插槽</div>
        </child>
      </div>
    </template>
    <script>
    import child from "./indexChild.vue";
    export default {
      components: {
        child,
      },
    };
    </script>

    (子组件代码↓)

    <template>
      <div>
        <h5>我是子组件</h5>
        <slot name="index1"></slot>
        <slot name="index2"></slot>
        <slot name="index3"></slot>
        <slot></slot>
      </div>
    </template>
    <script>
    export default {
      name: "child",
      data() {
        return {};
      },
    };
    </script>

    (效果↓)

     在上面示例中,可以看出父组件通过模板上添加slot属性与具名插槽的进行关联,没用name属性的slot展示匿名插槽。

    3.作用域插槽(slot-scope, 使用子组件的任何数据 来达到自定义显示内容的目的)

    示例:

    (子组件代码↓)

    <template>
      <div>
        <h5>我是子组件</h5>
        <slot name="numList" :data="numList"></slot>
      </div>
    </template>
    
    <script>
    export default {
      name: "child",
      data() {
        return {
          numList: [111, 222, 333],
        };
      },
    };
    </script>

    (父组件代码↓)

    <template>
      <div>
        <h3>我是一个父组件</h3>
        <!--显示子组件-->
        <child>
          <template slot="numList" slot-scope="item">
            <div v-for="num in item.data">
              <p>{{ num }}</p>
            </div>
          </template>
        </child>
      </div>
    </template>
    <script>
    import child from "./indexChild.vue";
    export default {
      components: {
        child,
      },
    };
    </script>

    (效果↓)

  • 相关阅读:
    ZooKeeper-3.3.4集群安装配置
    zookeeper原理(转)
    flume 转
    Flume NG 简介及配置实战
    Flume NG 配置详解
    '增量赋值(augmented assignment)', 多么痛的领悟!
    用matplotlib制作的比较满意的蜡烛图
    Spyder code editor里的小秘密: 右侧高亮提示
    pywinauto: 导入时遇到 "TypeError: LoadLibrary() argument 1 must be string, not unicode"
    爬取新浪财经个股的历史财报摘要
  • 原文地址:https://www.cnblogs.com/qjh0208/p/15424763.html
Copyright © 2011-2022 走看看