14 vue slot 插槽

7/3/2021 vue

插槽 — Vue.js (opens new window)

<!-- 使用组件 -->
<navigation-link url="/profile">
  <!-- 放到组件插槽中的内容 -->
  Your Profile
</navigation-link>

<!-- 组件的定义 -->
<div>
    <a v-bind:href="url" class="nav-link">
    <slot></slot> <!-- 预留的插槽 -->
    </a>
</div>

# 作用域

<!-- 使用组件 -->
<navigation-link url="/profile">
  <!-- 放到组件插槽中的内容 -->
  这里的内容和 navigation-link 是“平级”的,不能访问到 navigation-link 中的内容,如 url
</navigation-link>

父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。

# 默认值(后备内容)

<!-- 组件的定义 -->
<div>
    <a v-bind:href="url" class="nav-link">
    <slot><button>这里的 button 是插槽的默认内容</button></slot>
    </a>
</div>

# 具名插槽

定义多个插槽

插槽 — 具名插槽 (opens new window)

<!-- 组件的定义 -->
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot> <!-- 一个不带 name 的 <slot> 出口会带有隐含的名字“default”。 -->
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>
<!-- 组件的使用 -->
<base-layout>
  <template v-slot:header> <!-- 写在 template 标签中 -->
    <h1>Here might be a page title</h1>
  </template>

  <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

# 作用域插槽

插槽 — 作用域插槽 (opens new window)

父组件替换插槽的标签,但是内容由子组件来提供(本来是由父组件提供了,只能访问父组件的内容)

<!-- 组件的定义 -->
<span>
  <slot v-bind:useruser="user"> <!-- 将 user 这个数据,使用 v-bind 绑定的 useruser 这个属性上 -->
    {{ user.lastName }}
  </slot>
</span>


<!-- 组件的使用 -->
<current-user>
  <template v-slot:default="slotProps"> <!-- 默认插槽可以省略为 v-slot="slotProps" -->
    <!-- 这里使用 slotProps 给子组件“取个名字”,然后使用它引用 useruser 这个属性了 -->
    {{ slotProps.useruser.firstName }}
  </template>
</current-user>
更新时间: Sunday, July 4, 2021 15:59