插槽slot

插槽，占位符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属性接受子组件导出的数据，实现子组件里面的插槽向父组件通信' }]"
                :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>