1.什么是插槽

  1. 在组件标签中写的内容会自动出现在slot组件中
  2. 如果有了这个slot组件标签 我们可以让我们的组件变得更加丰富多彩
  3. 有多个slot 那么组件标签中的内容就会出现在所有的slot中

    2.具名插槽

  • 如果组件模板中有多个slot出现，但是我们想要将我们的slot和组件标签里边的内容进行一一对应 分配一下slot 这种分配slot的形式被称之为 具名插槽


  • 1.直接使用slot（自 2.6.0 起有所更新。已废弃已废弃）

    1. - 首先在组件标签内写上我们想要展示的内容，并且在内容的元素上边写上slot属性 属性值为自定义
    1. <组件标签名>
    2.   <p slot="p"></p>
    3.   <span slot="span"></span>
    4. </组件标签名>
    1. - 其次，在组件模板中 编写slot组件标签，在slot组件标签上边添加name属性，name属性值为第一步中自定义名字
    1. template: `
    2.   <div>
    3.       <slot name="p"></slot>
    4.       <slot name="span"></slot>
    5.   </div>
    6. `

    2.使用v-slot(可以缩写为#)

    1. - 首先在组件标签内写上template标签，在template标签里边写上想要展示的内容 在template标签上边添   加 v-slot:自定义名字
    1. <组件标签名>
    2.   <template v-slot:p>
    3.       <p></p>
    4.   </template>
    5.   <template v-slot:span>
    6.       <span></span>
    7.   </template>
    8. </组件标签名>
    1. - 其次，在组件模板中 编写slot组件标签，在slot组件标签上边添加name属性，name属性值为第一步中自定义名字
    1. template: `
    2. <div>
    3.     <slot name="p"></slot>
    4.     <slot name="span"></slot>
    5. </div>
    6. `

    注意：

    • 使用v-slot只能用在组件标签上或者是template标签上 不能用在html已有的标签上边
    • 使用v-slot一般情况下 需要绑定在template标签上边 如果想要将v-slot使用在组件标签上，前提是 组件模板中只有一个slot 独占默认插槽


3.独占默认插槽

如果一个组件的template模板中只有一个slot组件标签，那么该组件标签就被称之为 独占 默认 插槽

  • 该slot 有一个默认的名字 名字是default
  • 如果不写这个slot的名字的话，会走默认的名字 default
  • 如果有多个slot在其中的话，我们需要给每一个slot都尽量加上name名


4.作用域插槽 使用slot-scope（自 2.6.0 起有所更新。已废弃）

如果slot标签上边添加了属性 那么可以在组件中的某一个标签上边添加slot-scope来调用我们slot组件上边的属性值
步骤：
1 在组件模板中添加slot标签，在slot标签上边使用v-bind:自定义属性名=”data中数据”

  1.  template: `
  2.     <div>
  3.         <slot v-bind:自定义属性名="data数据"></slot>
  4.     </div>
  5. `

2 在组件标签中，添加想要使用的标签，在标签上边使用slot-scope=”自定义名字”来接收组件中传递过来的data数据，就可以渲染在想要渲染的标签里边

  1. <组件标签名>
  2.     <p slot-scope="自定义名字">
  3.         {{自定义名字.第一步中的自定义属性名}}   // 就可以拿到data数据
  4.     </p>
  5. </组件标签名>

5.v-slot实现作用域插槽

1 在组件模板中添加slot标签，在slot标签上边使用v-bind:自定义属性名=”data中数据”

  1.  template: `
  2.     <div>
  3.         <slot v-bind:自定义属性名="data数据" name="自定义插槽名"></slot>
  4.     </div>
  5. `

2 在组件标签内，写上template标签，在标签上边使用v-slot:自定义插槽名=”自定义名字”

  1. <组件标签名>
  2.     <template v-slot:自定义插槽名="自定义名字">      // 自定义名字永远都是一个对象
  3.         {{自定义名字.第一步中的自定义属性名}}
  4.     </template>
  5. </组件标签名>

例子

  1. <div id="app">
  2.         <child>
  3.             <template v-slot:default=obj>                //obj就是{ "msg1": 123454 }
  4.                 <p>{{obj.msg1}}</p>
  5.             </template>
  6.         </child>
  7.     </div>
  8.     <script>
  9.         Vue.component('child',{
  10.             template:`
  11.                 <div class=child>
  12.                     <slot :msg1='msg' name='default'></slot>
  13.                 </div>
  14.             `,
  15.             data(){
  16.                 return{
  17.                     msg:123454
  18.                 }
  19.             }
  20.         })
  21.         new Vue({
  22.             el:'#app'
  23.         })
  24.     </script>

6.解构插槽

使用花括号可以对对象直接进行解构赋值，这个过程被称之为解构插槽

  1. <div id="app">
  2.         <child>
  3.             <template v-slot:default={msg1}>                //msg1就是123454
  4.                 <p>{{msg1}}</p>
  5.             </template>
  6.         </child>
  7.     </div>
  8.     <script>
  9.         Vue.component('child',{
  10.             template:`
  11.                 <div class=child>
  12.                     <slot :msg1='msg' name='default'></slot>
  13.                 </div>
  14.             `,
  15.             data(){
  16.                 return{
  17.                     msg:123454
  18.                 }
  19.             }
  20.         })
  21.         new Vue({
  22.             el:'#app'
  23.         })
  24.     </script>

7.后备内容

当组件标签中没有传递渲染任何内容的时候，我们可以在组件模板template的slot中添加内容，用来显示
如果组件标签中有内容添加渲染，则slot中的内容会被替换