vue之插槽slot

Posted codexlx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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指令

 

以上是关于vue之插槽slot的主要内容,如果未能解决你的问题,请参考以下文章

vue之插槽slot

Vue系列之插槽(slot)详解

Vue 之 slot(插槽)

Vue3之插槽(Slot)

Vue.js(17)之 插槽

VUE学习笔记:12.组件化之:slot组件插槽讲解