VUE slot用法(单个slot 具名slot)

  

 

这是官网上的slot内容,以我的理解slot slot相当于就是可以插入各种标签、内容的组件

第1部分就是在说这个slot组件可以包含什么、作用域范围、是继承父组件数据还是子组件数据等。

具名插槽即作用局部范围的组件。

 

 一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

如:<slot><slot>

那么这个没有名字的slot 会被传入数据吗?(自己试),传入什么数据(看下面)?

现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。

这个意思就是说,标签没有v-slot名字的任何数据都会被传入这个没有名字的slot,如下:

<template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

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

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

  

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

 上面这部分会被传入。

注意 v-slot 只能添加在 <template> 上 (只有一种例外情况),这一点和已经废弃的 slot attribute 不同。

  

posted @ 2021-03-14 04:19  程序1088  阅读(387)  评论(0)    收藏  举报