Vue中的插槽

最新推荐文章于 2024-09-09 17:27:34 发布

Coder_Messi

最新推荐文章于 2024-09-09 17:27:34 发布

阅读量391

点赞数

分类专栏：前端文章标签： html5 javascript vue 前端 vue.js

本文链接：https://blog.youkuaiyun.com/daiqin1997/article/details/114264158

版权

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了Vue.js中的插槽机制，包括匿名插槽、具名插槽和作用域插槽的使用方法。通过示例展示了如何在父组件中替换子组件的插槽内容，以及如何通过作用域插槽访问子组件的数据。同时，提到了Vue的新语法v-slot，用于替代原有的slot和slot-scope属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插槽是什么？
插槽用于自定义子组件中的部分内容，可以在子组件中通过<slot>标签来定义一个插槽，在父组件使用子组件时，在子组件两个标签中写入用来替换子组件插槽的内容即可。
示例:

<div id="app"></div>
<script type="text/javascript">
  const child ={
    template:`
        <div>
          <div>我是子组件</div>
          <slot>我是子组件中的插槽</slot>
        </div>`
  }
  new Vue({
    el:"#app",
    template:`<div>
        <div>我是父组件</div>
        <cpn>
          <div>我用来替换插槽中的内容</div>
        </cpn>
    </div>`,
    components: {
      'cpn': child
    },
  })
</script>

匿名插槽和具名插槽
插槽分为匿名插槽和具名插槽，具名插槽在定义时有name属性，如：<slot name=“slot01”></slot>，而匿名插槽在定义时没有写明name属性。注意：一个不带 name的 slot 出口会带有隐含的名字“default”。
在父组件中使用子组件时，想要替换具体名称的插槽时，需要给用来替换的标签中加一个slot属性，并使该属性的值和子组件中插槽的名字相对应即可。如果用于替换插槽的标签没有slot属性，则都会被用于替换子组件中的默认插槽的内容（name为default的插槽）。
大家可以探讨一下以下示例中子组件的插槽会被哪些内容替换呢？
示例：

<div id="app"></div>
<script type="text/javascript">
  const child ={
    template:`
        <div>
          <div>00000子组件的开头00000</div>
          <div>111111111111111111111111111111</div>
          <slot>我是匿名插槽</slot>
          <div>111111111111111111111111111111</div>
          <slot name="slot01">我是名为slot01的插槽</slot>
          <div>111111111111111111111111111111</div>
          <slot name="default">我是名为default的插槽</slot>
          <div>111111111111111111111111111111</div>
          <div>00000子组件的结尾000000</div>
        </div>`
  }
  new Vue({
    el:"#app",
    template:`<div>
        <span>我是父组件</span>
        <cpn>
          <div>我用来替换匿名插槽中的内容</div>
          <div>我也用来替换匿名插槽中的内容</div>
          <div slot="slot01">我用来替换slot01中的内容</div>
          <div slot="default">我用来替换名为default的插槽</div>
        </cpn>
    </div>`,
    components: {
      'cpn': child
    },
  })
</script>

作用域插槽
想要理解作用域插槽，首先需要理解编译作用域。
关于编译作用域，官方给出了一条准则：父组件模板中的东西都会在父级作用域内编译，子组件模板中的东西都会在子级作用域内编译。
示例：

<div id="app"></div>
<script type="text/javascript">
  const child ={
    template:`
          <div>
            <slot>我是一个插槽</slot>
          </div>`,
    data() {
      return {
        'message': '子组件中的内容'
      }
    }
  }
  new Vue({
    el:"#app",
    template:`<div>
          <div>{{message}}</div>
          <cpn>
            <template>
              <div>{{message}}</div>
            </template>
          </cpn>
      </div>`,
    components: {
      'cpn': child
    },
    data() {
      return {
        'message': '父组件中的内容'
      }
    }
  })
</script>

正如上面的示例，在父组件中使用{{message}}时，获取的都是在父组件中定义的message。
如果父组件的data中没有该message，则控制台会报错。
在这里插入图片描述

由此可见，通过一般的方式，在父组件的模板中只能访问到父组件中的数据，而无法获取子组件中的数据。在一些需求中，需要在替换插槽时使用子组件的数据，这时候，就需要使用作用域插槽了。

<div id="app"></div>
<script type="text/javascript">
  const child ={
    template:`
          <div>
            <slot :msg="message">我是一个插槽</slot>
          </div>`,
    data() {
      return {
        'message': '子组件中的内容'
      }
    }
  }
  new Vue({
    el:"#app",
    template:`<div>
          <div>{{message}}</div>
          <cpn>
            <template slot-scope="aa">
              <span>{{aa.msg}}</span>
            </template>
          </cpn>
      </div>`,
    components: {
      'cpn': child
    },
    data() {
      return {
        'message': '父组件中的内容'
      }
    }
  })
</script>

可以看到，上面示例可以在替换插槽时访问到子组件的内容了。
上方示例的获取子组件数据的过程为：

为插槽添加属性msg，其值为data中的message
为替换该插槽的template添加slot-scope=“aa”
在替换该插槽的template中使用aa.msg来获取子组件data中的message

Vue官方文档对这个过程的解释：

在这里插入图片描述

v-slot
上面为替换插槽的template添加slot属性和slot-scope属性的语法现在都被废弃了。
官方文档解释如下:
在这里插入图片描述

v-slot是用来替换这两个属性的。v-slot: (请注意冒号) 用来替换原来的 slot属性。
<template v-slot:slot01>几乎等同于原来的 <template slot=“slot01”>
示例：

<div id="app"></div>
<script type="text/javascript">
  const child ={
    template:`
          <div>
            <slot name="slot01">我是名为slot01的插槽</slot>
            <div>111111111111111111111111111</div>
            <slot name="slot02">我是名为slot02的插槽</slot>
          </div>`,
  }
  new Vue({
    el:"#app",
    template:`<div>
          <cpn>
            <template slot="slot01">
              <div>这是旧的替换方式</div>
            </template>
            <template v-slot:slot02>
              <div>这是新的替换方式</div>
            </template>
          </cpn>
      </div>`,
    components: {
      'cpn': child
    },
  })
</script>

需要注意的一点是：
v-slot 只能添加在 <template> 上 (只有一种例外情况)，这一点和已经废弃的
slot attribute 不同。
在<template>以外的标签上添加v-slot会报错：
在这里插入图片描述
对于“一种例外情况”，官方文档的解释为：当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot直接用在组件上。
对于这种情况，大家可以参阅官方文档。
总的来说：v-slot只能用于<template>标签上或者直接用在组件的标签上，其他的标签如<span>、<div>等无法使用v-slot。

v-slot也可以用来替换上面的slot-scope

slot-scope形式	v-slot形式
<cpn slotscope=“aa”>	<cpn v-slot=“aa”>
<cpn slotscope=“aa”>	<cpn v-slot:default=“aa”>
<cpn slot=“slot01” slotscope=“aa”>	<cpn v-slot:slot01=“aa”>

<div id="app"></div>
<script type="text/javascript">
  const child ={
    template:`
          <div>
            <slot name="slot01" :msg="message">我是一个名为slot01的插槽</slot>
            <slot :msg="message">我是一个匿名插槽</slot>
          </div>`,
    data() {
      return {
        'message': '子组件中的内容'
      }
    }
  }
  new Vue({
    el:"#app",
    template:`<div>
          <cpn>
            <template v-slot:slot01="aa">
              <div>一：{{aa.msg}}</div>
            </template>
            <template v-slot="aa">
              <div>二：{{aa.msg}}</div>
            </template>
            <!--
            <template v-slot:default="aa">
              <div>三：{{aa.msg}}</div>
            </template>
            -->
          </cpn>
      </div>`,
    components: {
      'cpn': child
    },
    data() {
      return {
        'message': '父组件中的内容'
      }
    }
  })
</script>