封装公共组件必备插槽使用,下面我简单记录下基本使用
一、子组件封装插槽预留
<template>
<div>
<p>
我是标题
<slot name="title">{{title}}</slot>
</p>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<p>
我是内容
<slot name="content">{{content}}</slot>
</p>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: "默认标题"
},
content: {
type: String,
default: "默认内容"
}
}
}
</script>
二、父组件引用
<template>
<div>
<slot-a title="标题哈哈哈" content="内容哈哈哈">
<!-- 方法一 v-slot:插槽名称 -->
<template v-slot:title>
个人信息
</template>
<!-- 方法二 #插槽名称 -->
<template #content>
<ul>
<li>昵称:皇菇凉</li>
<li>住址:湖北武汉</li>
</ul>
</template>
</slot-a>
</div>
</template>
<script>
import slotA from "@/components/slotA.vue"
export default {
components: {
slotA
}
}
</script>
三、展示效果
补充:以上只是记录了最基础的用法,细致的用法可参考这里