vue2中插槽的讲解—详细，vue3中插槽的用法延续了vue2.6.0以后的用法，vue插槽用法详解

2023-11-16 13:19:04

vue2中插槽其实有两个阶段性的改革 以vue2.6.0版本为分界线

先说共同点：

  1. 插槽内容
// 调用子组件
<my-slot><my-slot><h1>欲穷千里目</h1></my-slot></my-slot>

// 子组件
<template>
  <div class="about">
    <slot></slot>
  </div>
</template>
<script>
export default {
  components: {},
  props: {},
  data () {
    return {}
  },
  watch: {},
  computed: {},
  methods: {},
  created () {},
  mounted () {}
}
</script>
<style lang="less" scoped>
</style>

当组件渲染的时候，<slot></slot> 将会被替换为<h1>欲穷千里目</h1>。
1.插槽内可以包含任何模板代码，包括 HTML
2.甚至是其他的组件

注意： 如果子组件中没有<slot></slot>元素，那么<my-slot></my-slot>之间的任何内容都会被抛弃

  1. 编译作用域

插槽跟模板的其它地方一样可以访问相同的实例 property (也就是相同的作用域)，而不能访问<my-slot> 的作用域。例如 url 是访问不到的：(其实大可不必，也没这么用的其实，没见过这样的语法，直接就去访问标签上的属性，怎么的，也需要用事件对象呀)

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <my-slot url="/profile">
    {{num}}
    <!--
  这里的 `url` 会是 undefined，因为其 (指该插槽的) 内容是
  传递给<my-slot> 的而不是
  在 <my-slot> 组件内部定义的。
  -->
     Clicking here will send you to: {{ url }}
    </my-slot>
  </div>
</template>
<script>
import MySlot from '../components/MySlot'
export default {
  components: {
    MySlot
  },
  props: {},
  data () {
    return { num: 9999 }
  },
  watch: {},
  computed: {},
  methods: {},
  created () {},
  mounted () {}
}
</script>
<style lang="less" scoped>
</style>

作为一条规则，请记住：

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

  1. 后备内容(默认内容)
// 子组件
<template>
  <div class="about">
    <slot>save</slot>
  </div>
</template>
<script>
export default {
  components: {},
  props: {},
  data () {
    return { }
  },
  watch: {},
  computed: {},
  methods: {},
  created () {},
  mounted () {}
}
</script>
<style lang="less" scoped>
</style>
//父组件   标签中间什么都没有，默认就渲染save
<my-slot></my-slot>
//父组件   标签中间有东西，就渲染一个h1标签，但是看上去还是什么都没有
<my-slot><h1></h1></my-slot>

再说不同点：

2.6.0之前（不含2.6.0）

注意：在接下来所有的 2.x 版本中 slot 和 slot-scope attribute 仍会被支持，但已经被官方废弃且不会出现在 Vue 3 中

  1. 具名插槽（2.6.0之前在子组件标签内使用slot=“插槽名”，来吧合适的内容放到合适的地方，并且是slot属性用在<template>还是用在一个普通的元素上都可）
//子组件 base-layout
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>   //未命名插槽，也就是默认插槽，捕获所有未被匹配的内容  默认插槽其实有一个默认的名数字<slot name="default"></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

<base-layout>
  <template 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 slot="footer">
    <p>Here's some contact info</p>
  </template>
</base-layout>

//slot 也可以用在普通的元素上
<base-layout>
  <h1 slot="header">Here might be a page title</h1>

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

  <p slot="footer">Here's some contact info</p>
</base-layout>

//渲染结果都是
<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>
  1. 作用域插槽（带有 slot-scope 属性 的作用域插槽）

作用域插槽的作用：父组件对子组件的内容进行加工处理

在 <template> 上使用特殊的 slot-scope 属性，可以接收传递给插槽的 prop

slot-scope attribute 也可以直接用于非 元素 (包括组件)：

slot-scope 的值可以接收任何有效的可以出现在函数定义的参数位置上的 JavaScript 表达:

<template slot-scope='{ info }'>
        <strong v-if='nfo.id==3' class="current">{{info.name}}</strong>
        <span v-else>{{info.name}}</span>
      </template>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<style type="text/css">
  .current {
    color: orange;
  }
</style>
<body>
  <div id="app">
  // 让特定项变为橙色
    <fruit-list :list='list'>
      <template slot-scope='slotProps'>
        <strong v-if='slotProps.info.id==3' class="current">{{slotProps.info.name}}</strong>
        <span v-else>{{slotProps.info.name}}</span>
      </template>
    </fruit-list>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      作用域插槽
    */
    Vue.component('fruit-list', {
      props: ['list'],
      template: `
        <div>
          <li :key='item.id' v-for='item in list'>
            <slot :info='item'>{{item.name}}</slot>
          </li>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        list: [{
          id: 1,
          name: 'apple'
        },{
          id: 2,
          name: 'orange'
        },{
          id: 3,
          name: 'banana'
        }]
      }
    });
  </script>
</body>
</html>

2.6.0之后（含2.6.0）

  1. 具名插槽（v-slot指令）

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

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

// 子组件
<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>

  <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>
</base-layout>

// 现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。
  1. 作用域插槽：（作用域插槽的作用：父组件对子组件的内容进行加工处理，得打劫到这个值）封装组件，组件封装完毕，尽量就是不去动组件了，所以在父组件对子组件也要有个把控，不如说值，或者样式，对其是要有个把控的

插槽内容能够访问子组件中才有的数据是很有用的：
首先在子组件的slot标签上添加一个属性，绑定在 <slot> 元素上的 attribute 被称为插槽 prop
然后在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop

// 父组件
 <my-slot  :user="user">
   <template v-slot:default="slotProps">   // 可以使用结构语法的
    {{ slotProps.user.firstName }}
    </template>
</my-slot>
 data () {
    return {
      user: {
        lastName: 'kf',
        firstName: 'z'
      }
    }
  },

// 子组件
<template>
  <div class="about">
   <slot v-bind:user="user"> {{ user.lastName }}</slot>
</span>
    </div>
</template>

  props: {
    user: {
      type: Object,
      default: () => {}
    }
  },
 
 // 最终显示的是:   z

思考: 父组件在渲染子组件的时候是先去了子组件内部，然后根据子组件内部的slot标签，然后再来到父组件这里看看各个部位在对应的应该进哪一个插槽。
vue2中插槽的讲解—详细，vue3中插槽的用法延续了vue2.6.0以后的用法，vue插槽用法详解

3、默认插槽的写法

//当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上
<my-slot  :user="user">
   <template v-slot:default="slotProps">   // 可以使用结构语法的
    {{ slotProps.user.firstName }}
    </template>
</my-slot>
<my-slot  :user="user" v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
</my-slot>
// 这种写法还可以更简单。就像假定未指明的内容对应默认插槽一样，不带参数的 v-slot 被假定对应默认插槽：
<my-slot v-slot="slotProps">
  {{ slotProps.user.firstName }}
</my-slot>


注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确：
<!-- 无效，会导致警告 -->
<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
  <template v-slot:other="otherSlotProps">
    slotProps is NOT available here
  </template>
</current-user>
只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法：

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>

  <template v-slot:other="otherSlotProps">
    ...
  </template>
</current-user>
  1. 可以结构
这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式
<my-slot :user="user">
    <template v-slot:default="{user}">
    {{ user.firstName }}
    </template>
</my-slot>
  1. 动态插槽名
动态指令参数也可以用在 v-slot 上，来定义动态的插槽名：

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>
  1. 缩写
    跟 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>

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

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

然而，和其它指令一样，该缩写只在其有参数的时候才可用。这意味着以下语法是无效的：

<!-- 这样会触发一个警告 -->
<current-user #="{ user }">
  {{ user.firstName }}
</current-user>
如果你希望使用缩写的话，你必须始终以明确插槽名取而代之：
<current-user #default="{ user }">
  {{ user.firstName }}
</current-user>
上一篇：javascript vue2异步更新原理


下一篇：使用vue2.x.x开发项目 过程 使用经验