Vue slot 用法

约定不等于承诺〃 2022-10-01 07:56 132阅读 0赞

Vue 实现了一套内容分发的 API，将 `<slot>` 元素作为承载分发内容的出口。可以理解为模板中的占位符, 在实例化时用自定义标签元素替代.

本文基于Vue 2.0 最新语法.

### slot 的用法大概分为三种: ###

*  匿名插槽
 *  具名插槽
 *  作用域插槽

一. 匿名插槽

<template> <div>   <span style="display:block;">匿名插槽</span>  <slot>匿名插槽</slot>   </div></template><script>export default { }</script><style></style> 模板复制代码

<template> <div> <slott>   <el-button>确定</el-button>   </slott> </div></template><script>import slott from '@/components/lesson/pieces/slott'export default { components: { slott }}</script><style></style> 使用复制代码

二. 具名插槽

<template>    <div>                 <span style="display:block;">具名插槽</span>                <slot name="content"></slot>                <slot name="short"></slot>    </div></template><script>export default {    }</script><style></style>                                                                模板复制代码

<template>    <div>       <slott>                                 <template v-slot:content>            <el-button type="success">具名插槽 template</el-button>           </template>                                             <template #short> <el-button type="primary">具名插槽缩写</el-button> </template> </slott> </div></template><script>import slott from '@/components/lesson/pieces/slott'export default { components: { slott }}</script><style></style> 使用复制代码

三. 作用域插槽

<template>    <div>                        <span style="display:block;">作用域插槽</span>                        <slot name="scope" v-bind:data="msg">后备内容</slot>                <ul>            <slot name="list" v-for="item in arr" v-bind:user="item">                {
        { item }}            </slot>        </ul>                            </div></template><script>export default {    data () {        return {            msg: 'message',            arr: [                "GOT",                "Australia",                "NewZealand"            ],            unNamed: "伏地魔"        }    }}</script><style></style>                                                               模板复制代码

<template>    <div>       <slott>                                            <template v-slot:list="slotProps">               {
        { slotProps.user + "my love" }}           </template>                      <template v-slot:scope="scopeProp">               {
        { scopeProp.data }}           </template>                      <template v-slot:default="props">              {
        { props.info }}           </template>                             </slott>    </div></template><script>import slott from '@/components/lesson/pieces/slott'export default {    components: {        slott    }}</script><style></style>                                                                 使用复制代码

转载于:https://juejin.im/post/5cad53b2f265da037c7cc7ec