插槽 究极入门篇

插槽不仅可以插入文本还能是 html 或其他组件

 

 

渲染作用域

当你想在一个插槽中使用数据时，例如：

<todo-button>
  Delete a {{ item.name }}
</todo-button>

该插槽可以访问与模板其余部分相同的实例 property (即相同的“作用域”)。

 上面的意思是 item 是 父组件的 属性 property。

 

备用内容

这里我的理解就是 函数的参数指定默认值一个意思

当没有使用插槽传值的时候，使用默认值

 最后渲染成，

 当有传值的时候，则用传的值

 最后结果

具名插槽

具体情况是有多个插槽时，则需要进行命名区分，

例如下面这个栗子：🎃

<div class="container">
  <header>
    <!-- 我们希望把页头放这里 -->
  </header>
  <main>
    <!-- 我们希望把主要内容放这里 -->
  </main>
  <footer>
    <!-- 我们希望把页脚放这里 -->
  </footer>
</div>

 

我们可以通过下面对插槽命名解决，在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称

注意，v-slot 只能添加在 <template>

 

作用域插槽

让插槽内容能够访问子组件中才有的数据，但是普通方法是行不通的，根据渲染作用域，插槽使用的是父组件的内容。

假如有下面这个组件，目标：我们想自定义 li 里的内容。

 

 

 

slotProps 的名字随意命名， 

下面使用 v-slotPp

 

 

 

 

 

 

个人理解，组件插槽 slot 中绑定的属性，将会传到父组件 v-slot:default="slotProps" 中， 记得 items 的数据是在子组件中的。

在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 slotProps，但你也可以使用任意你喜欢的名字。

 

 

独占默认插槽的缩写语法

直接去掉 template 和 default 直接写在组件上面

但是：👏👏👏

只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法

 

 初学者为了好记忆，统一先用 template 语法

 

 

 

具名插槽的缩写

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：

<base-layout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>

  <template #default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>