深入瞭解vue自定義組件之插槽slot

vue插槽官方文檔地址

vue中，自定義組件一般只需要新建一個vue模板文件，根據需求定義組件樣式即可，如下

自定義組件文件 MyComponent.vue

<template>
    <div>
        {{msg}}
    </div>
</template>

<script>
    export default {
        name: "MyComponent",
        props: {
            msg: {
                type: String,
                default: 'hello world'
            }
        }
    }
</script>

<style scoped>

</style>

引用部分

<template>
    <div>
        <my-component :msg="message"></my-component>
    </div>
</template>

<script>
    import MyComponent from "@/components/MyComponent";

    export default {
        name: "home",
        components: {
            MyComponent
        },
        data: () => ({
            message: 'hi vue.js'
        })
    }
</script>

<style scoped>

</style>

這樣就可以子定義一個一般的組件

但是好多時候我們需要在自定義的組件放入其他div或者其他組件

修改引用部分，自定義組件加入一個p標籤

<template>
    <div>
        <my-component :msg="message">
            <p>vue is awesome</p>
        </my-component>
    </div>
</template>

但是這並不會達到預期的效果。

這個時候就會用到vue中的slot插槽

修改自定義組件MyComponent.vue：

<template>
    <div>
        <div>{{msg}}</div>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: "MyComponent",
        props: {
            msg: {
                type: String,
                default: 'hello world'
            }
        }
    }
</script>

<style scoped>

</style>

頁面展示：

還可以加入多個插槽

修改自定義組件MyComponent.vue，加入多個插槽

<template>
    <div>
        <div>{{msg}}</div>
        <slot></slot>
        <slot name="first"></slot>
    </div>
</template>

修改引用部分：

<template>
    <div>
        <my-component :msg="message">
            <template>
                <p>vue is awesome</p>
            </template>
            <template v-slot:first>
                <div>
                    of course
                </div>
            </template>
        </my-component>
    </div>
</template>

頁面展示：

通過slot的name屬性給插槽命名，使用的時候使用v-slot命令就可以把模板綁定到指定名稱的插槽。

如果slot沒有命名，會自動命名爲default。

同樣的在使用的時候沒有通過v-slot指定插槽的名字，會自動綁定到名爲default的插槽。