下面是slot使用方式,占坑是在子组件中,而填坑是在父组件
在子组件中占坑的方式:
<slot name="footer"></slot>
其中name:代表这个“坑”的名称(是slot的一个特殊的特性,代表标识),这个子组件中这两个,可以不全显示,也可以只显示一个,通过父组件来控制
子组件中:
<template>
<div>
<slot name="footer"></slot>
<slot name="header"></slot>
</div>
</template>
那么父组件中如何给对应的坑赋予某种功能?
利用 slot
另一种特性的用法: 直接用在一个普通的元素上
如:
<p slot="footer">hello world</p>
其中slot:代表这个标签内容是插槽的内容, footer:在子组件中你定义的“坑”的名称
可以给不同的“坑”定义不同的样式,标签结构以及布局等
父组件:
<template>
<div>
<HelloWorld>
<p slot="footer" class="Success" v-show="flat">Here's some contact info</p>
<p slot="header" class="Warning" v-show="flat2">123456</p>
</HelloWorld>
<button @click="handleClick1()">{{text1}}</button>
<button @click="handleClick2()">{{text2}}</button>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "app",
components: {
HelloWorld
},
data() {
return {
text1: "显示插槽1",
text2: "显示插槽2",
flat: false,
flat2: false
};
},
methods: {
handleClick1() {
if (!this.flat) {
this.flat = true;
} else {
this.flat = false;
}
},
handleClick2() {
if (!this.flat2) {
this.flat2 = true;
} else {
this.flat2 = false;
}
}
}
};
</script>
<style>
.Success {
font-size: 26px;
color: green;
}
.Warning {
font-size: 54px;
color: firebrick;
}
.Error {
font-size: 32px;
color: red;
}
</style>