深入了解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的插槽。