vue中slot的多种用法

一、注意：在slot标签添加样式无效。拥有命名的插槽不能被不含slot属性的标签内容替换，会显示slot的默认值

二、关于vue slot 的多级传递使用

但是在实际的使用过程中，常常会出现外部组件内容需要多级嵌套传递到目标组件，那么slot可以如何实现呢？
现在假设有A，B，C三个组件，层级关系为A>B>C(爷爷，父亲，儿子)

C:

<div>
    C组件
    <div>
      <slot name="pane" :data="我是C">我是c组件(儿子)---外部没传递，我才显示</slot>
    </div>
</div>

B:

<div>
    B组件---这是一个中间传递的slot
    <C>
        <div slot="pane" slot-scope="{data}">
          <slot name="pane" :data="data"></slot>
        </div>
    </C>
</div>

A:

<div>
    A组件
    <B>
    <div slot="pane" slot-scope="{data}">
      {{data}}注意，我要传到C了
    </div>
    </B>
</div>

其他扩展用法跟此类似

 三、扩展

1、基本用法

//组件
<template>
    <div class="com">
        <slot name="header"></slot>
        <slot>如果没有插槽或者不具名就是显示当前</slot>
        <slot name="floot"></slot>
    </div>
</template>
<script>
    export default {
        
    }
</script>
 
//使用
<template>
    <div id="app">
        <com>
            <div class="header" slot="header">
                我将会插入到名为header的插槽当中
            </div>
            <div class="floot" slot="floot">
                我将会插入到名为floot的插槽当中
            </div>
        </com>
    </div>
</template>
<script>
import com from '@/components/com.vue';
export default {
    name:"App",
    components:{
        com
    }
}
</script>

2、插槽中使用data

//组件
<template>
    <div class="com">
        <slot name="header" :slotData="comData"></slot>//slotData表示插槽key值
        <slot>如果没有插槽或者不具名就是显示当前</slot>
        <slot name="floot" :slotData="comData"></slot>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                comData:{
                    header:"我将会插入到名为header的插槽当中",
                    floot:"我将会插入到名为floot的插槽当中"
                }
            }
        },
    }
</script>
 
 
//使用
<template>
    <div id="app">
        <com>
            <template v-slot:header="{slotData}">
                //必须使用template包裹，v-slot后面跟着的是插槽名，slotData插槽里表示的key值
                <div class="header">
                    {{slotData.header}}
                </div>
            </template>
            <template v-slot:floot="{slotData}">
                <div class="floot">
                    {{slotData.floot}}
                </div>
            </template>
        </com>
    </div>
</template>
<script>
import com from '@/components/com.vue';
export default {
    name:"App",
    components:{
        com
    }
}
</script>

3、动态插槽

//组件
<template>
    <div class="com">
        <slot name="header" :slotData="comData"></slot>
        <slot name="body" :slotData="comData"></slot>
        <slot name="floot"></slot>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                comData:{
                    header:"我将会插入到名为header的插槽当中",
                    body:"我将会插入到名为body的插槽当中"
                }
            }
        },
    }
</script>
 
//使用
<template>
    <div id="app">
        <com>
            <template v-slot:[slotName]="{slotData}">
                <div class="slot">
                    {{slotData[slotName]}}
                </div>
            </template>
            <div class="floot" slot="floot">
                <button @click="changeSlotName">改变动态插槽</button>
            </div>
        </com>
    </div>
</template>
<script>
import com from '@/components/com.vue';
export default {
    name:"App",
    components:{
        com
    },
    data(){
        return{
            slotName:"header"
        }
    },
    methods: {
        changeSlotName(){
            this.slotName = this.slotName === "header" ? "body" : "header";
        }
    }
}
</script>