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

插槽 - slot

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

1.插槽的基本使用

html代码如下：

<div id="app">

  <you><h4>替换的h4标签h4>you>
  
  <you>you>
div>

<template id="cpn">
  <div>
    <h2>slot-插槽的基本使用h2>
    
    <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">
      
      <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>

运行代码如下：