vue slot 復用

有3步

• 第一步：創建渲染slot的組件 重要
• 第二步：為slot添加父組件數據（props） 重要
• 第三步：使用

第一步：創建渲染slot的組件

首選創建一個單文件組價，由於我們是使用的slot（父組件傳進來的），所以，我們只需要創建js文件即可，而不用創建.vue文件

// slot.js
export default {
    name: 'Slot', // slot的名字，調試使用
    functional: true, // 使組件無狀態 (沒有 data ) 和無實例 (沒有 this 上下文)。他們用一個簡單的 render 函數返回虛擬節點使他們更容易渲染。
    inject: ['Root'], // 父組件的映射 
    props: { // 此組件接受的props
        data: Object,
        options: Object
    },
    render: (h, ctx) => { // dom渲染函數
        return h('div', ctx.injections.Root.$scopedSlots['icon']({ // 得到名為icon的作用域插槽
            data: ctx.props.data, // 給slot的組件傳遞props
            options: ctx.props.options
        }));
    }
};

第二步：為slot添加父組件數據（props）

// 導入子組件
import IconSlot from 'slot.js';

// 切換到父組件
export default {
    name: 'IconTable',
    components: {IconSlot},
     provide () { // 該對象包含可注入其子孫的屬性 在這里把父組件自身傳遞給子組件
        return {
            Root: this
        };
    },
    data() {
        return {
            list: [],
            options: {}
        };
    }
}

在模板中使用

<template>
    <div v-for="(item, index) in list" :key="index">
        <icon-slot :data="item" :options="options"></icon-slot>
    </div>
</template>

第三步：使用

<icon-table>
    <template slot="icon" slot-scope="{ list, options }">
        <div v-if="list.length > 1"><Icon type="add"></Icon></div>
        <div v-else><Icon type="del"></Icon></div>
    </template>
</icon-table>

大功告成 總結

如果在父組件直接取this.$slot或this.$scopedSlots的話，
其實只能用一次
如果在模板中使用 slot 標簽來接收的話，其實也只能只用一次

所以核心思路是；每次使用都必須重新創建VNode節點，那只能每次都使用createElement生成node,
那只有一個辦法使用render渲染了，然后第一個參數創建dom后，dom附帶的數據，都可以是一個對象，只要保證節點是唯一的即可，數據其實無所謂，怎么傳都可以