首先,我们常见的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> 元素上使用

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

前往低代码交流专区

更多推荐