技術標籤：Vue

文章目錄

• • • • • 1. 具名插槽
        • 2. 作用域插槽

插槽： 父元件向子元件傳遞資料包括標籤資料

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>