zoukankan      html  css  js  c++  java
  • vue之插槽slot

    一、插槽内容

    父组件:

    <navigation-link>
      Your Profile
    </navigation-link>

    子组件:

    <a
      v-bind:href="url"
      class="nav-link"
    >
      <slot>这是子组件slot,当父组件的子组件标签内没有写内容时显示</slot>
    </a>

     注意:当子组件的slot内写了内容,如果父组件中写的子组件标签内没有写内容就会显示子组件中写的内容。即后备内容

    二、编译作用域

     官方说法:该插槽跟模板的其它地方一样可以访问相同的实例 property (也就是相同的“作用域”),而不能访问 <navigation-link> 的作用域。例如 url 是访问不到的:

    父组件:

    <navigation-link url="/profile">
      Your Profile  {{url}}
    </navigation-link>

    大概意思就是:在父组件中写的子组件标签名是无法在标签内部访问到的

    三、具名插槽

     顾名思义,就是有名字(name)的插槽

    子组件:

    <template>
      <div class="sc">
        <div class="container">
          <header>
            <slot name="header"></slot>
          </header>
          <main>
            <!-- <slot></slot> -->
          </main>
          <footer>
            <slot name="footer"></slot>
          </footer>
        </div>
      </div>
    </template>

    父组件:

    <slot-child>
        <template slot="header">
          <h2>这是header插槽</h2>
        </template>
        <p>这是没有命名的插槽</p>
        <template slot="footer">
          <h2>这是footer插槽</h2>
        </template>
    </slot-child>

    最终,只会显示含slot属性名的template标签

    不过注意的是:slot和slot-scope在2.6.0中被废弃了,取而代之的是v-slot指令

  • 相关阅读:
    期望
    更改开机默认操作系统及等待时间修改
    Python排序
    Python IDLE入门 + Python 电子书
    Python基础教程——1基础知识
    Java:谈谈protected访问权限
    三星I9100有时不能收发彩信完美解决!中国移动
    java继承的权限问题
    Python基础教程——2列表和元组
    访问控制和继承(Java)
  • 原文地址:https://www.cnblogs.com/codexlx/p/12913295.html
Copyright © 2011-2022 走看看