Vue的插槽有三种,下面来一一介绍
一、默认插槽
默认插槽的使用很简单。把Student组件为被使用组件,App组件为使用组件,及引入Student组件的组件。
使用方法:想要在Student组件中插入如下的h1标签内的内容。在App组件中的用法;在App组件的Student标签里写入要插入的标签。
<template>
<div id="app">
<!-- 默认插槽 -->
<Student>
<!-- 想要在Studetn组件中插入如下代码 -->
<h1>我想插入到Student组件中</h1>
</Student>
</div>
</template>
<script>
import Student from "./components/Student.vue";
export default {
name: "app",
components: { Student },
};
</script>
<style>
p {
margin-top: 20px;
}
</style>
在Student组件中,使用slot标签来占位,也就是说,在slot标签的位置处会插入上面App组件上<Student>标签中的内容。
<template>
<div id="student">
<h1>下面是App组件插入的内容</h1>
<slot></slot>
</div>
</template>