|
目录
什么是插槽
定义
插槽的作用
插槽的分类
默认插槽
具名插槽
作用域插槽
注意事项
什么是插槽
定义
实现功能
自定义内容 （包括不限于以下）
插槽的作用
-
父组件，子组件的状态数据传递 (作用域插槽) -
提供灵活的，私人订制版组件
插槽的分类
默认插槽
代码
//定义组件 Card
<template>
?<div class="cardContainer">
? ?<h3>Card组件</h3>
? ?<slot>我是一个插槽</slot>
?</div>
</template>
?
/****************************************/
?
//父组件使用Card组件
<template>
?<div id="app">
? //使用Card组件
? ?<Card>
? ? ?<template>
? ? ? //模板中的内容会替换 Card 组件中 <slot></slot>内容
? ? ?</template>
? ?</Card>
?</div>
</template>
具名插槽
代码
//Vue解析模版时，默认情况下，未指定名称的插槽默认值为default
//同一个组件中，存在多个未命名插槽，当仅使用一个时，会将内容插入所有插槽中
?
//定义具名插槽
<template>
?<div class="cardContainer">
? ?<slot name="content"> 我是插槽1 </slot>
? ?<h4>更多内容 敬请关注...</h4>
? ?<slot name="footer">我是个插槽2</slot>
?</div>
</template>
?
?
//使用具名插槽
<template>
?<div id="app">
? ?<Card title="电影">
? ? ?<!-- v-slot:插槽名 -->
? ? ?<template v-slot:content>
? ? ? 我在使用名称：content的插槽
? ? ?</template>
? ?</Card>
?</div>
</template>
作用域插槽
使用场景
-
父组件在向插槽中插入内容时需要使用子组件中定义的数据时 -
//作用域插槽 子组件
<template>
?<div class="cardContainer">
? ?<h3>{{ title }}</h3>
? ?<slot name="content" :content="content"> 我是插槽1 </slot>
? ?<!-- 设置一个插槽 -->
? ?<h4>更多内容 敬请关注...</h4>
? ?<slot name="footer">我是个插槽2</slot>
? ?<span></span>
?</div>
</template>
<script>
export default {
?name: "Card",
?data() {
? ?return {};
},
?props: {
? ?title: String,
},
?computed: {
? ?content() {
? ? ?if (this.title === "电影") {
? ? ? ?return ["恐怖", "惊悚", "喜剧"];
? ? }
? ? ?if (this.title === "游戏") {
? ? ? ?return ["单机", "联机"];
? ? }
? },
},
};
</script>
<style scoped>
.cardContainer {
?width: 400px;
?margin-left: 20px;
?background-color: aquamarine;
}
h3 {
?text-align: center;
?
?background-color: bisque;
}
</style>
?
父组件
<template>
?<div id="app">
? ?<Card title="电影">
? ? ?<!-- v-slot:插槽名="插槽属性绑定值 ，类型 Object" -->
? ? ?<template v-slot:content="contentInfo">
? ? ? ?<ul>
? ? ? ? ?<li v-for="item in contentInfo.content" :key="item">{{ item }}</li>
? ? ? ?</ul>
? ? ?</template>
? ?</Card>
? ?<Card title="游戏">
? ? ?<template v-slot:content>
? ? ? ?<ol>
? ? ? ? ?<li>单机</li>
? ? ? ? ?<li>联机</li>
? ? ? ?</ol>
? ? ?</template>
? ?</Card>
?</div>
</template>
?
<script>
import Card from "./components/slot组件/Card";
?
export default {
?name: "App",
?components: {
? ?Card,
},
?mounted() {},
};
</script>
?
<style>
#app {
?display: flex;
?justify-content: space-around;
}
</style>
?
注意事项
|