vue slot(插槽)

vue slot(插槽)

默认插槽

规则：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间的通信方式，适用于父组件===》子组件
父组件

子组件

此时这种情况下，action不会去访问组件里面的action只会去访问父级里面的

备用内容(默认内容)

当父级里面没写东西，这个插槽就会默认显默认内容

具名插槽

组件内

<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>
    <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>
  <div slot='footer'>aa</div>
</base-layout>

注意，v-slot 只能添加在 <template> 上 (只有一种例外情况),其余情况使用slot=‘插槽名’

作用域插槽

理解：数据在组件的自身，但根据数据生成的html 结构需要组件的使用者来决定。
子组件

父组件

还可以下面这两个写法在父级接收数据
下面就是数据在子组件的本身，但是根据数据生成的html结构是由父级（使用者决定的）

独占默认插槽的缩写语法

独占默认插槽的缩写语法

解构插槽 Prop

父组件中

动态插槽名

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>

具名插槽的缩写

具名插槽的缩写