Vue 深入理解vue中的slot与slot-scope-优快云博客

本文链接：https://blog.youkuaiyun.com/juvenile_/article/details/105013736

深入理解vue中的slot与slot-scope
官网插槽
 Vue中插槽-----特殊特性slot、slot-scope与指令v-slot的使用方法
 Vue的slot-scope的场景的个人理解

总结

.slot插槽(不具名)相当于在子组件中占有一个位置，父组件可以填入文本内容
具名就是子组件name="xxx"父组件slot=“xxx” 例如：

 <div slot="header">这里是头部</div>
 <slot name="footer"></slot>

3.v-slot使用：v-slot在组件中使用slot进行占位时，也是在slot标签内使用name 属性给slot插槽定义一个名字。但是在html内使用时就有些不同了。需要使用template模板标签，template标签内，使用v-slot指令绑定插槽名，标签内写入需要添加的内容

父组件：
<template v-slot:header>//v-slot指令使用插槽
   <h2>slot头部内容</h2>
</template>
子组件：
 <slot name = "header"></slot>//具名插槽

作用域插槽（slot-scope使用）：
a、：在组件模板中书写所需slot插槽，并将当前组件的数据通过v-bind绑定在slot标签上。
b、：在组件使用时，通过slot-scope=“gain”,接收组件中slot标签上绑定的数据。
c、:通过gain.xxx就可以使用绑定数据了

<body>
   <div id="app">
      <Test>
         <div slot="default" slot-scope="gain">//作用域插槽的用法（slot-scope）
            {{ gain.msg }}   // gain接收slot=default所有数据，这里msg只是其中一个
         </div>
         
      </Test>
   </div>

   <template id="test">
      <div>
         <slot name="default" :msg="msg"> </slot>
         <p>这里是test组件</p>   // 
      </div>
   </template>
</body>
<script>
   new Vue({
      el:"#app",
      components:{
         'Test':{
            template:"#test",
            data(){
               return {
                  msg:"你好"
               }
            },
         }
      }
   })
</script>

5.作用域插槽：v-slot的用法（和slot-scop用法类似）

<body>
   
   <div id="app">
      <Test>
         <template v-slot:header="gain">//v-slot定义作用域插槽
            <div>
                  <h3>slot</h3>
                  <p> {{gain.msg}} </p>
            </div>
         </template>
           
      </Test>
   </div>
   
   <template id="test">
      <div>
         <slot name="header":msg="msg"></slot>
         <p>这里是test组件</p>
      </div>
   </template>
   
</body>
<script>
   Vue.component('Test',{
      template:"#test",
      data(){
         return {
            msg:'这里是头部'
         }
      }
   });

   new Vue({

   }).$mount("#app")
</script>

解构插槽 Prop

 data(){
   return {
        msg: {
          a: '111'
        },
        msg2: {
          b: '111'
        }
     }
  }
 // 解构插槽 Prop
 <slot name="header":msg="msg" :msg2="msg2"></slot>
 <template v-slot:header="{ msg }">//v-slot定义作用域插槽
    <div>
          <h3>slot</h3>
          <p> {{msg.a}} </p>
    </div>
 </template>
 //你甚至可以定义后备内容，用于插槽 prop 是 undefined 的情形：
 template v-slot:header="{ msg = {a = "222"} }">
    <div>
          <h3>slot</h3>
          <p> {{msg.a}} </p> //undefined 就是222
    </div>
 </template>