插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制(在子组件定义占位符)
子组件
<template>
<div>
<!-- 声明一个插槽区域 -->
<!-- vue 官方规定:每一个 slot 插槽,都要有一个 name 名称 -->
<!-- 如果省略了 slot 的 name 属性,则有一个默认名称叫做 default -->
<slot name="name"></slot>
</div>
</template>
<script>
export default {
name: "student",
data() {
return {};
},
};
</script>
父组件
<template>
<student>
<template v-slot:name>
<!-- 显示的内容是由父亲组件控制的 -->
<div>{{name}}</div>
</template>
</student>
</template>
<script>
import student from "../../components/student";
export default {
components: {
student,
},
data() {
return {
name: '张三',
};
},
};
</script>