小白学习 vue 插槽 slot

最新推荐文章于 2023-03-24 15:29:21 发布

三白学习前端

最新推荐文章于 2023-03-24 15:29:21 发布

阅读量258

点赞数

分类专栏： vue学习

本文链接：https://blog.csdn.net/qq_39085060/article/details/104029251

版权

vue学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

vue 插槽 slot

个人理解

个人感觉，为同一组件在不同的情况添加不同的内容，不需要专门修改组件，就像 java 的多态，来提高复用性。比如: 就像一块基础设施完备的土地，给你划分好区域，只要这个位置没有归属权(name)，房子随便盖。
我们可以理解 slot 为占住当前的位置，方便我们插入内容。
Vue 的插槽分为匿名插槽（单个插槽/默认插槽）、具名插槽、作用域插槽(带数据的插槽)
vue 在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍有用的特性。但是将会在vue 3 中，被废弃的这两个，不会被支持即无效且不会出现在 Vue 3 中。
```
// 这是 home 组件模板
<template>
    <div class='home'>
      <p>我是home 组件</p>
      <slot>
        <h3>没传内容</h3>
      </slot>
    </div>
  </template>

//home 组件的内部内容
<home>这是组件的内部内容</home>
```

slot 注意点

vue 插槽的编译作用域的规则: 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。(个人理解: 各自管各自的，谁也别干预谁。也是用 props 和 $emit 传递数据的原因之一吧。)

组件模板中 没用 slot ，那组件内部的内容是不会被渲染的，直接抛弃。

<home>
  <span>{{msg}}</span>  //  报错，Property or method "msg" is not defined on the instance but referenced during render
  // 组件内部的数据，不是组件的，是其 父元素节点的Property or method。父元素节点没有声明，肯定报错。

  <p>是否能渲染</p>
</home>

// home 组件内部的内容全部会被抛弃，只渲染 home 的模板。等同于下面
<home></home>

插槽用 <slot>标签来确定渲染的位置,只能用一个默认插槽。组件内部所有的HTML内容都会被渲染到 slot 的位置。除了 template 标签绑定了 v-slot 指令的内容。
v-slot 指令, 它取代了 slot 和 slot-scope。

v-slot 简写把参数之前的所有内容 v-slot:替换为字符#。例如 v-slot:header可以被重写为 #header

//具名
<template slot="header"> 
<template #header">    <!-- <template v-slot:header"> -->

// 作用域
<template slot-scope="todo"> 
<template v-slot="todo"> 

// 具名-作用域
<template slot-scope="todo" slot='header'> 
<template #header="todo">

v-slot属性只能在<template>上使用。

后备内容和匿名插槽（单个插槽/默认插槽）

后备内容

当组件内部没有内容时，组件模板中的slot标签的内容会被渲染。有则渲染组件内部的内容。

  // home 组件模板
  <template>
    <div class='home'>
      <p>我是home 组件</p>
      <slot>
        <h3>没传内容</h3>
      </slot>
    </div>
  </template>

 // 组件内部
  <h2>组件内没有内容：</h2>
  <home></home>

  <h2>组件内有内容：</h2>
  <home> 
    <h3>我有内容了</h3>
  </home>


// 渲染结果
  <h2>组件内没有内容：</h2> 
    <div class="home">
      <p>我是home 组件</p> 
      <h3>没传内容</h3>
    </div> 

  <h2>组件内有内容：</h2>
    <div class="home">
      <p>我是home 组件</p>
      <h3>我有内容了</h3>
  </div>

单个插槽（匿名插槽/默认插槽）

单个插槽一般都是匿名的，无name属性。

注意: 组件模板中使用多个 slot 标签占位后，在组件内部的内容有多少个slot就会重复多少次。(多写几个默认插槽，怕是铁憨憨)

  // home 组件模板
  <template>
    <div class='home'>
      <p>我是home 组件</p>
      <slot>
        <h3>没传内容</h3>
      </slot>
      <slot></slot>
      <slot></slot>
    </div>
  </template>

  //组件内部
  <home>
  <p>铁憨憨</p>
  </home>

  //渲染结果
  <div class="home">
    <p>我是home 组件</p> 
    <p>铁憨憨</p>
    <p>铁憨憨</p>
    <p>铁憨憨</p>
  </div>

单个插槽当然也可以给他命名，默认未命名情况下，Vue2.6+版本默认为 v-slot:default或简写#default。也可以省略default直接写v-slot。如果写写上#default或者 v-slot,单个插槽变成了具名插槽。

// home 组件模板
  <template>
    <div class='home'>
      <p>我是home 组件</p>
      <slot>         <!-- slot的name=default 写不写都一样 -->
        <h3>没传内容</h3>
      </slot>
    </div>
  </template>
//
<home >
    <p>我是 slot </p>
    <template v-slot>
      <p>我变成具名插槽了</p>
    </template>
</home>


// 渲染结果
<div class="home">
  <p>我是home 组件</p> 
  <p>我变成具名插槽了</p>
</div>

具名插槽

匿名插槽没有name属性，所以是匿名插槽，那么，插槽加了name属性，就变成了具名插槽。具名插槽可以有N个。但是 name 和 v-slot:‘插槽名’ 是一一对应的。
具名的作用,也就是指向到那个位置展示。也和在组件内部的书写顺序无关。
在向具名插槽提供内容的时候，我们要在一个 <template>标签上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称。

//home组件
<div class='home'>
  <p>我是home 组件</p>

  <slot name=header></slot>
  <slot name='bar'></slot>
</div>

//内部
<homse >
  <p>我是 default </p>
  <template v-slot:header>
    <p>v-slot:header 我变成具名插槽了</p>
  </template>
  <template #bar>
    <p>#header 我变成具名插槽了</p>
  </template>
</homes>

//渲染结果
<div class="home">
  <p>我是home 组件</p> 
  <p>v-slot:header 我变成具名插槽了</p> 
  <p>#bar 我变成具名插槽了</p>
</div>

作用域插槽(带数据的插槽)

其实就是获取父组件的内部数据。不用像父子组件通信一样的麻烦。

绑定在元素上的属性被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字(注意: v-slot 定义的名字可以和 prop 的名字不同,但是结构的时候需要重命名 prop) 。并且 slot 标签上返回的属性值，是以一个对象的形式保存起来。

  <template v-slot='res'>
    <h2>在 slot 上面绑定属性，得到父组件的数据，通过v-slot获取</h2>
    <h4>{{res}}</h4>
  </template>
   
  //
  <p>我是home 组件</p> 
  <h2>在 slot 上面绑定属性，得到父组件的数据，通过v-slot获取</h2> 
  <h4>
  {
    "res": {
      "name": "作用域插槽",
      "type": "Object"
    }
  }
  </h4>

默认插槽携带数据，会被当作具名插槽使用，slot 的 name 默认为 default。只会渲染最后一个 <template #default='res'>标签。

具名插槽带数据，v-slot:bar='res'简写为 #bar='res'。

<template >
  <h2>得到数据</h2>
  <h4>{{res}}</h4>
</template>
<template #bar='res'>
  <h2>具名插槽得到数据</h2>
  <h4>{{res}}</h4>
</template>

//
<h2>具名插槽得到数据</h2>
<h4>
{
  "res": {
    "name": "作用域插槽",
    "type": "Object"
  }
}
</h4>

解构Prop，由于返回的是一个对象，那就可以解构。可以使接受的数据变得更简洁。

<template #prop='{res}'>
  <h2>解构插槽 Prop</h2>
  <h4>{{res}}</h4>
</template>

//
<h2>解构插槽 Prop</h2>
<h4>
{
  "name": "作用域插槽",
  "type": "Object"
}
</h4>

尤其是在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能，例如将 user 重命名为 person：v-slot={"user": person}。其实就是解构Prop。
```
<template #other='{"res": other}'>
  <h2>prop 重命名 </h2>
  <h4>{{other}}</h4>
</template>

//
<h2>prop 重命名 </h2> 
<h4>
{
  "name": "作用域插槽",
  "type": "Object"
}
</h4>
```

你甚至可以定义后备内容，用于插槽 prop 是 undefined 的情形。

<template #uf='{uf = {arr:[1]}}'>
  <h2>用于插槽 prop 是 undefined 的情形：</h2>
  <h4>{{uf}}</h4>
</template>

//
<h2>prop 重命名1 </h2> 
<h4>
{
  "arr": [
      1
  ]
}
</h4>

当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上。
```
<home v-slot='{res}'>
{{res.name}}
</home>
```
代码

<tempalte>
  <div class='home'>
    <p>我是home 组件</p>
    <slot :res=res ></slot>
    <slot :res=res name=bar></slot>
    <slot :res=res name=prop></slot>
    <slot :res=res name=other></slot>
    <slot :uf=uf name=uf></slot>
  </div>
</tempalte>
export default {
    name:"home",
    data() {
        return {
            "res":{
                "name": 作用域插槽,
                "type": "Object",
            },
            "uf": undefined,
        }
    },
}

转载及引用

官方插槽文档

对Vue插槽slot的理解

深入理解vue中的slot与slot-scope

如何理解Vue.js的组件中的slot?

Vue 插槽 & 高复用组件

[Vue] slot详解，slot、slot-scope和v-slot

三白学习前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小白学习 vue 插槽 slot

vue 插槽 slot个人理解个人感觉，为同一组件在不同的情况添加不同的内容，不需要专门修改组件，就像 java 的多态，来提高复用性。比如: 就像一块基础设施完备的土地，给你划分好区域，只要这个位置没有归属权(name)，房子随便盖。我们可以理解 slot 为占住当前的位置，方便我们插入内容。Vue 的插槽分为匿名插槽（单个插槽/默认插槽）、具名插槽、作用域插槽(带数据的插槽...
复制链接

扫一扫