插槽
当前组件中
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
在父组件中使用
<BaseLayout>
<template v-slot:header>
<!-- header 插槽的内容放这里 -->
</template>
</BaseLayout>
- 动态插槽 #[dynamicSlotName]
- 作用域插槽(父组件通过props传递,子组件通过插槽向父组件传递)
子组件
<ul>
<li style="color: red"><slot name="header" message="1"></slot></li>
<li><slot message="2"></slot></li>
<li style="color: green"><slot name="footer" message="3"></slot></li>
</ul>
父组件中
<HelloWord>
<template #header="m">{{ m.message }}</template>
<template #default>1111</template>
<template #footer="f">{{ f.message }}</template>
</HelloWord>
网友评论