1.普通插槽
父组件
<template>
<van-panel title="普通插槽">
<Child>hello child,我来自父组件</Child>
</van-panel>
</template>
<script>
import Child from "./Child";
export default {
components: {
Child
}
};
</script>
<style>
</style>
子组件
<template>
<div style="border: 1px solid green;">
<h4>这是Child组件</h4>
<!-- 用来存放父组件的内容 -->
<slot></slot>
<p>我喜欢编程</p>
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
此时可以显示父组件插在子组件里的内容
2.具名插槽
父组件
<template>
<van-panel title="具名插槽">
<Child>
<p slot="left">
<van-button>左边</van-button>
</p>
<p slot="right">
<van-button>右边</van-button>
</p>
</Child>
<!-- vant的slot -->
<div slot="footer">
<van-button type="primary">点击</van-button>
</div>
</van-panel>
</template>
<script>
import Child from "./Child";
export default {
components: {
Child
}
};
</script>
<style>
</style>
子组件
<template>
<div class="flex jc-sa" style="border: 1px solid green;">
<!-- 接收父组件对应的内容 -->
<slot name="left"></slot>
<!-- <slot name="right"></slot> -->
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
接受了父组件传来的slot 名字，并可以选择使用
