vue slot的调用方法

首先，我们常见的html标签是这样的：

<div>这里是内容</div>

vue中的组件使用跟html标签是非常类似的，那么可不可以这样写呢？？

<DataTablePage>这里是插入的内容</DataTablePage>

毫无疑问，当然是可以的，只需要在子组件中加入slot

<template>
    <div class="datatables-wrapper">
        <TableContent></TableContent>
        <slot>【如果没有内容则显示我】</solt>
    </div>
</template>

那么：

<DataTablePage>这里写内容是完全可以的啊</DataTablePage>

具名slot 的使用：

<template>
    <div class="datatables-wrapper">
        <slot name="prepend">【如果没有内容则显示我1】</solt>
        <TableContent></TableContent>
        <slot name="append">【如果没有内容则显示我2】</solt>
    </div>
</template>

<DataTablePage>
    <div name="prepend">我是父组件传入的内容</div>
    <div name="append"></div>
</DataTablePage>

slot 在子组件中预留一个位置，或者给一个默认内容，如果传入新的内容，那么会取代默认的内容，如果不传入，则显示默认内容。
通过name属性可以区分不同的slot，传入不同的slot内容。

注意：

父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

重点：作用域插槽

<ul>
  <li
    v-for="todo in todos"
    v-bind:key="todo.id"
  >
    <!-- 我们为每个 todo 准备了一个插槽，-->
    <!-- 将 `todo` 对象作为一个插槽的 prop 传入。-->
    <slot v-bind:todo="todo">
      <!-- 回退的内容 -->
      {{ todo.text }}
    </slot>
  </li>
</ul>

<todo-list v-bind:todos="todos">
  <!-- 将 `slotProps` 定义为插槽作用域的名字 -->
  <template slot-scope="slotProps">
    <!-- 为待办项自定义一个模板，-->
    <!-- 通过 `slotProps` 定制每个待办项。-->
    <span v-if="slotProps.todo.isComplete">✓</span>
    {{ slotProps.todo.text }}
  </template>
</todo-list>

也可以使用解构：

<todo-list v-bind:todos="todos">
  <template slot-scope="{ todo }">
    <span v-if="todo.isComplete">✓</span>
    {{ todo.text }}
  </template>
</todo-list>

在vue v2.5.0+的版本上， slot-scope可以使用在任意的标签或者组件上，不再限制在 < template> 元素上使用

扫描二维码关注公众号，回复： 1865818 查看本文章

<todo-list v-bind:todos="todos">
  <div slot-scope="{ todo }">
    <span v-if="todo.isComplete">✓</span>
    {{ todo.text }}
  </div>
</todo-list>

vue slot的调用方法

猜你喜欢