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指令

以下为v-slot的用法：

<slot-child>
  <template v-slot:hreader>
    <h2>这是header插槽</h2>
  </template>
  <!-- 上面那种写法可以简写成下面这种 -->
  <template #footer>
    <h2>这是header插槽</h2>
  </template>
</slot-child>