指令:
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标签上面