vue 2.6.0+ 插槽

插槽： 父组件向子组件传递数据包括标签数据

1. 具名插槽

多个插槽，不同插槽对应不同内容

子组件（layout）

<template>
    <div>
        <header>
            <slot name="header"></slot>
        </header>

        <main>
            <slot name="main"></slot>
        </main>

        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
</template>

<script>
    export default {
        name: "Layout"
    }
</script>

<style scoped>
    header{
        color: red
    }

    main{
        color: green
    }

    footer{
        color: pink
    }
</style>

父组件

<template>
    <div>
        <Layout>
        	<!-- v-slot:header <==> #header -->
            <template v-slot:header>
                <h1>Here might be a page title</h1>
            </template>

            <template #main>
                <p>A paragraph for the main content.</p>
                <p>And another one.</p>
            </template>

            <template #footer>
                <p>Here's some contact info</p>
            </template>
        </Layout>
    </div>
</template>

<script>
    import Layout from "./components/layout/Layout";
    export default {
        components:{
            Layout
        }
    }
</script>

2. 作用域插槽

表单数据操作使用场景

<el-table-column label="操作">
    <template v-slot="scope">
		{{  scope.row }} 表示当前行数据
    </template>
</el-table-column>