VUE - 插槽的使用

自己理解 : 插槽就是组件的对外扩展，组件外部能够灵活地替换插槽所在位置的内容.

1.插槽普通用法

<!--  组件模板  -->
    <template id="wgKeep">
        <div>
            <h3> <slot>我是默认标题</slot> </h3>
            <p> <slot>我是默认内容</slot> </p>
        </div>
    </template>
    
    <script>

        const wgKeep = {
            template : "#wgKeep",
        };

        var vm = new Vue({
            el:"#app",
            components : {
                "wg-keep" : wgKeep
            }
        })

    </script>

案例1

<!--  普通插槽的使用  -->
    <div id="app">
        <wg-keep></wg-keep>
    </div>
    

结果 : 当组件标签内部没有内容的时候，默认展示插槽的默认值。

案例2

<!--  普通插槽的使用  -->
    <div id="app">
        <wg-keep>黑曼巴-科比</wg-keep>
    </div>
    

结果 ：组件标签中有内容的时候会替换所有（ name=default ）的插槽；
注 ：当 插槽没有定义name属性时，默认 name = default

2.具名插槽的用法

使用手法 ： 使用name属性标识插槽的名字，v-slot来绑定对应插槽

<!--  组件模板  -->
    <template id="wgKeep">
    
        <div style="width:300px;">
        
            <h3> <slot name="title">我是默认标题</slot> </h3>
            
            <h5 style=" margin-left: 50px ">
                <slot>我是作者</slot> 
            </h5>
            
            <p> <slot name="content">我是默认内容</slot> </p>
            
        </div>
        
    </template>
    
    <script>

        const wgKeep = {
            template : "#wgKeep",
        };

        var vm = new Vue({
            el:"#app",
            components : {
                "wg-keep" : wgKeep
            }
        })

    </script>

案例1

	<!-- 在template中使用v-slot来替换指定名称的插槽 -->
	
	<div id="app">
        <wg-keep>
            <template v-slot:title >NBA</template> 
            <template> 黑曼巴-科比</template>
            <template v-slot:content >黑曼巴精神--永存</template>
        </wg-keep>
    </div>
    

结果 : 拥有v-slot属性的模板找到对应的插槽，没有v-slot属性的还是默认找name=default的插槽
注 ：<template> 黑曼巴-科比</template> 等同于 <template v-slot> 黑曼巴-科比</template> 等同于 <template v-slot：default> 黑曼巴-科比</template>

案例2

在 tamplate标签 中引入了一个组件来替换插槽所在位置

	<div id="app">
        <wg-keep>
            <template v-slot:title >NBA</template>
            
            <template> 黑曼巴-科比 
            	<c-img></c-img> 
            </template>
            
            <template v-slot:content >黑曼巴精神--永存</template>
        </wg-keep>
    </div>
	
	<template id="img">

                <span>
                    <img :src="url" alt="" width="20px" height="20px">
                </span>

    </template>	

 <script>

        const wgKeep = {
            template : "#wgKeep",
        };
		// 增加了一个组件
        const cImg =  {
            template: "#img",
            data(){
                return {
                    url : "https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=3339202615,3879308162&fm=85&app=92&f=PNG?w=121&h=75&s=67B06C6CF98ECD74462BAF0F020060DD"
                };
            }
        };

        var vm = new Vue({
            el:"#app",
            components : {
                "wg-keep" : wgKeep,
                "c-img" : cImg, // 增加了一个组件
            }
        })

    </script>

结果 ： 从结果中可知—可以使用组件替换插槽所在位置，这样更加灵活了我们对外的一个扩展。

3.作用域插槽的用法

自己理解 ：父组件通过作用域插槽使用子组件定义的变量。我们知道子组件用props来接收父组件在组件标签上绑定的属性值，作用域插槽其实一样，就是父组件通过v-slot来接收子组件在插槽上绑定的属性值。

下面例子中 : 子组件插槽中默认展示full_name 全称，我们想要用这个变量中的简称

	<!--  组件模板  -->
    <template id="wgKeep">
        <div>
            <slot> {{user.full_name}} </slot>
        </div>
    </template>

	<script>

        const wgKeep = {
            template : "#wgKeep",
            data(){
                return {
                    user:{
                        full_name : "詹姆斯-小皇帝",
                        name : "詹姆斯"
                    }
                }
            }
        };

        var vm = new Vue({
            el:"#app",
            components : {
                "wg-keep" : wgKeep,
                "c-img" : cImg,
            }
        })

    </script>

使用手法1 : 接收子组件对应插槽整体对象

   		<wg-keep>
   		
			<!-- v-slot="wgKeep" 等同于 v-slot:default="wgKeep" -->
			
            <template v-slot:default="wgKeep">
                {{wgKeep}}  {{wgKeep.user.name}}
            </template>

        </wg-keep>

结果 ：wgKeep这里接到的值就是对应name=default插槽的对象。
注意 ：如果使用了作用域插槽，这里只能有一个name=default的插槽。也就是name值必须是唯一的。

使用手法2 ：使用解构语法来分别接值。

   		<wg-keep>
   		
			<!-- v-slot="wgKeep" 等同于 v-slot:default="wgKeep" -->
			
            <template v-slot:default="{ user }">
               {{user}}  {{user.name}}
            </template>

        </wg-keep>

结果 ： 解构语法: { 属性名 ，属性名 … }
注 ：解构语法能够 可以有默认值，可以重命名

使用手法3 ：当组件内只有一个默认插槽时我们可以直接在组件标签上来获取子组件变量。

		<wg-keep v-slot="{user}">
                {{user}}  {{user.name}}
        </wg-keep>

结果 :

4.具名插槽的语法糖

v-slot:header 等同于 #header

<base-layout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>
  
  <template #footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

注意：当是默认插槽时 用 #default

5.动态插槽名

	<div id="box">
        <cpn>
            <!-- 这里[]里面可以是一个表达式  里面只能小写 -->
            <template v-slot:[slotname]>
                <button>嘿嘿</button>
            </template>
        </cpn> 
    </div>