Vue插槽 前世今生

Vue的插槽

• 默认插槽
• 具名插槽
• 备份插槽
• 作用域插槽

默认插槽

<child></child>   // 使用了一个组件



// 我们发现 使用组件时 使用的是标签 标签内部可不可以写一些东西呢
<div>Hello World</div>



<child>张三</child>  // 无法显示


<div><slot></slot><slot></slot></div>
// 组件标签传入的内容 会把每个slot 各填一份 没有办法精准传值  传递的值会把所有插槽的内容都更改

// 如果插槽没有传递内容  显示默认值
<div><slot><button>默认</button></slot></div>

具名插槽

我们传入的插槽内容都会替换组件定义的 slot,不论我们定义多少个slot,无一例外都会 同样的内容 替换掉
有一些情况,我们需要传入 不同的位置的内容 去替换不同位置的 slot插槽

<div>
     <slot></slot>
    <p>静态内容</p>
    <slot></slot>
</div>
 
// 我们希望静态内容前面和后面的内容都通过传入的方式接受 但是目前只能接受同样的内容

这个时候我们可以使用 具名插槽 的东西来实现

我们可以在定义插槽的时候给定义一个 name 属性

// 定义
<div>
     <slot name='before'></slot>
    <p>静态内容</p>
    <slot name='after'></slot>
</div>
// 引用
 <span slot ='after'>啦啦啦</span>
 
// 这里我们给两个插槽 定义了不同的name

具名插槽 简写

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

// base-layout 组件

```javascript
<div class="hello" >
     <header>
        <slot name="header">头部</slot>
     </header>
     <main>
          <slot >主要部分</slot>
     </main>
  </div>

作用域插槽的解构

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

// base-layout 组件


 <template #main>
          <div >jpjjjj</div>
      </template>
        <template v-slot:default="{main}">
            {{main.name}}
        </template>
    </HelloWorld>

备份插槽

在 slot(标签) 中写入 默认内容 如果在传入插槽内容时,内容不为空,那么还会 按照之前的模式替换, 如果没传,那么 默认内容 就会自动出现 替换slot 的位置

<div>
    Hello world 
    <slot>我是默认的哦</slot>
</div>

<child></child>  // 什么都不写 页面上就会显示 Hello World 我是默认的哦

编译作用域

• 官方文档给出的一条定义是：父组件模板的所有东西都会在父级作用域内编译 子组件模板的所有东西都会在子级作用域内编译
• 父组件的使用的属性 是属于父组件的
• 子组件内使用的属性是子组件的

作用域插槽

• 作用域插槽 一句话 ： 父组件替换插槽的标签 但是内容由子组件来提供

在传入插槽内容时 没有用动态变量 如果用了会怎样

<child>
    {{name}}
</child>

name 读取的是父组件的变量, 和child组件没有任何关系,假如 在child组件中定义了一个属性name,父组件中同样有属性name,这个时候读取的一定是父组件的 name 属性

如果我想读取 子组件中的name 需要怎么做呢

子组件中的name被父组件读取到,要先在 定义插槽 的位置 ,将name传递出来,

<div>
    Hello World 
    <slot v-bind:name1='name'></slot>
</div>

<child>
    <span slot-scope='obj自定义对象名'>{{obj.name1}}</span>
</child

pan标签上定义了一个叫做 slot-scope(作用域插槽) 的属性 后面跟着的是我们随意定义的对象名 obj, 我们前面定义的 name1 就被放入到我们的 obj 中, 我们就可以通过obj.name1取到值