Vue.js中的插槽slot(具名插槽、作用域插槽)详解

插槽 - slot

优点：可以预留空间，提高组件的复用性；

1.插槽的基本使用

html代码如下：

<div id="app">
<!--将h4标签中的内容替换到插槽中 -->
  <you><h4>替换的h4标签</h4></you>
  <!--不在插槽中添加值时，插槽会使用默认值 -->
  <you></you>
</div>

<template id="cpn">
  <div>
    <h2>slot-插槽的基本使用</h2>
    <!--在slot标签中，可以写入默认值-->
    <slot><div>设置slot默认值</div></slot>
  </div>
</template>

js代码如下：

<script src="../../vue.js/vue.min.js"></script>
<script>
  const mv = new Vue({
    el: '#app',
    data:{
    },
    components:{
      you: {
        template: '#cpn',
      }
    }
  })
</script>

运行结果：

2.具名插槽的使用

当一个组件中需要定义多个插槽时，就需要用到具名插槽。

具名插槽：

• 需要在slot标签中添加 name属性，属性值任意写；
• 在引用组件时，通过添加 slot = “属性值” 来关联对应的插槽。

运行结果如下：

html代码如下：

<div id="app">
  <you>
    <span slot="aaa">aaa的具名插槽</span>
    <button slot="bbb">bbb的具名插槽</button>
    <em slot="ccc">ccc的具名插槽</em>
  </you>
</div>

<template id="cpn">
  <div>
    <h3>slot-具名插槽的使用</h3>
    <slot name="aaa"></slot>
    <slot name="bbb"></slot>
    <slot name="ccc"></slot>
  </div>
</template>

js代码如下：

<script src="../../vue.js/vue.min.js"></script>
<script>
  const mv = new Vue({
    el: '#app',
    data:{},
    components:{
      you:{
        template: '#cpn',
      }
    }
  })

3.作用域插槽

使用方法：
步骤1：在子组件中通过** v-bind:参数1 = “参数2” **定义；
步骤2：在调用子组件时，在template标签中加入 slot-scope=“slot” 语句；
步骤3：之后就可以通过 slot.参数1 进行访问。

参数1：自定义名称， 参数2：子组件中被访问数据的名称。

eg:需求：访问子组件中 planguages：[‘JavaScript’,‘Python’,‘C++’,‘Go’],通过水平数据显示、列表显示。

html代码如下：

<div id="app">
<!--  水平显示-->
  <you>
    <template slot-scope="slot">
      <!--join()函数：将数组中的数据通过某种方式进行链接-->
      <span>{{ slot.jun.join(' - ')}}</span>
    </template>
  </you>
<!--默认列表显示-->
  <you></you>

<template id="cpn">
  <div>
    <slot :jun="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{{ item }}</li>
      </ul>
    </slot>
  </div>
</template>

js代码如下：

<script src="../../vue.js/vue.min.js"></script>
<script>
  const mv = new Vue({
    el: '#app',
    data:{},
    components:{
      you: {
        template:'#cpn',
        data(){
          return{
            pLanguages:['JavaScript','Python','C++','Java','Go']
          }
        }
      }
    }
  })
</script>

运行代码如下：