插槽，占位符slot
具名插槽，指定占位符slot、name
作用域插槽，子組件占位符向父組件占位符通信。slot、slot-scope

• 子組件：

<template>
    <div>
        <!-- 普通插槽 -->
        <slot></slot>

        <!-- 具名插槽 -->
        <slot name="name"></slot>

        <!-- 作用域插槽和具名插槽 -->
        <ul>
            <!-- row = {item[0], {item[i]}},其中，row自定義屬性，將要傳到父組件里面，通過slot-scope進行接受 -->
            <slot
                v-for="item in [
                  { name: '作用域插槽:' }, 
                  { content: 'slot-scope屬性接受子組件導出的數據，實現(xiàn)子組件里面的插槽向父組件通信' }]"
                :row="item"
                name="more"
            ></slot>
        </ul>
    </div>
</template>

• 父組件：

<template>
    <div>
        <my-son>
            <template>
                <h3>插槽：占位符</h3>
            </template>

            <template slot="name">
                <h3>具名插槽，制定name屬性的占位符</h3>
            </template>

            <!-- scope = { row },其中，slot-scope接受子組件傳遞過來的參數 -->
            <template slot="more" slot-scope="scope">
                <b>{{ scope.row.name }}</b>
                <span>{{ scope.row.content }}</span>
            </template>
        </my-son>
    </div>
</template>

<script>
import mySon from "./pages/son";
export default {
    components: {
        mySon,
    },
};
</script>