526互联

Vue2组件插槽的使用笔记

发布时间 2023-03-29 16:01:45作者: 碎月

Vue2插槽使用
组件MyComponent.vue：

<template>
    <div>
        <slot name="name1" :userName="'zhagnsan'"></slot>
    </div>
</template>
复制

使用组件：

   <my-component>
        <template slot="name1" slot-scope="scope">
            content{{ scope }}
        </template>
    </my-component>

或者：

<my-component>
    <template v-slot:name1="scope">
        content{{ scope }}
    </template>
</my-component>

输出：content{ "userName": "zhagnsan" }