Vue2.x-插槽slot用法

指令：

　　v-shot

说明：

　　插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签

使用示例

子组件：
<template>
    <div>
        <button>
            <slot>子组件自定义按钮</slot>
        </button>
    </div>
</template>

父组件引入使用：
<template>
    <div>
        <TButton></TButton>
    </div>
</template>

这时页面显示：

　　

 

 

 当父组件未传任何内容时，则默认编译子组件中的内容。

 如果在父组件使用时自定义内容，则展示父组件定义的内容：

<template>
    <div>
        <TButton>父组件定义按钮</TButton>
    </div>
</template>

页面展示：

　　

具名插槽

　　在slot标签上增加name属性，使用时，则需指定name，否则不生效，示例：

子组件：
<template>
    <div>
        <button>
            <slot name="text">子组件自定义按钮</slot>
        </button>
    </div>
</template>

父组件引入使用：
    <template>
    <div>
        <TButton>
            <template v-slot:text>
                父组件定义按钮
            </template>
        </TButton>
    </div>
</template>

注意：v-slot只能写在template标签上面

具名插槽缩写

　　将v-slot替换成#,示例：

<template>
    <div>
        <TButton>
            <template #text>
                父组件定义按钮
            </template>
        </TButton>
    </div>
</template>

　　如果没有名称，简写时也要带上default，示例：

子组件：
    <template>
    <div>
        <button>
            <slot>子组件自定义按钮</slot>
        </button>
    </div>
</template>

父组件引入使用：
    <template>
    <div>
        <TButton>
            <template #default>
                父组件定义按钮
            </template>
        </TButton>
    </div>
</template>

作用域插槽：

　　作用域插槽就是父组件插槽获取子组件中的数据，示例：

子组件定义：
<template>
    <div>
        <button>
            <slot key1="value1" key2="value2">子组件自定义按钮</slot>
        </button>
    </div>
</template>

父组件获取子组件的数据：
<template>
    <div>
        <TButton>
            <template #default="childValue">
                父组件定义按钮
                <br />
                {{ childValue }}
            </template>
        </TButton>
    </div>
</template>
    

　　页面展示：

　　

 

 

 　　其中childValue是自定义的名称，childValue作为子组件所有数据的key，使用数据则以childValue.key1形式

　　对应老版本使用则是slot-scope="childValue"

 

具名插槽+作用域插槽不简写使用示例：

子组件：
    <template>
    <div>
        <button>
            <slot name="text" key1="value1" key2="value2">子组件自定义按钮</slot>
        </button>
    </div>
</template>

父组件：
    <template>
    <div>
        <TButton>
            <template v-slot:text="childValue">
                父组件定义按钮
                <br />
                {{ childValue }}
            </template>
        </TButton>
    </div>
</template>

使用多个插槽示例：

子组件：
<template>
    <div>
        <div>
            <slot name="header" text="我是header">header</slot>
            <slot name="main" text="我是main">main</slot>
            <slot name="footer" text="我是footer">footer</slot>
        </div>
    </div>
</template>

父组件：
    <template>
    <div>
        <TMain>
            <template #header="headerValue">
                <div class="header">
                    {{ headerValue.text }}
                </div>
            </template>
            <template #main="mainValue">
                <div class="main">
                    {{ mainValue.text }}
                </div>
            </template>
            <template #footer="footerValue">
                <div class="footer">
                    {{ footerValue.text }}
                </div>
            </template>
        </TMain>
    </div>
</template>

注意：

　　:后面是插槽的名称

　　=后面是父组件获取子组件的数据  

　　#是v-slot的缩写  #default    #text  ===  v-slot:text     对应老版本写法： slot="text"

　　v-slot和#只能写在template标签上面