Vue 插槽 slot 简单案例_综合

之前接触过 Vue 的组件、父子传递、插槽等内容，但不是特别清晰，现在花一些时间整理一下，以最简单的例子回顾学习内容

Vue 组件封装简单案例——小白入门
Vue 子传父案例简单入门——小白推荐
Vue 父传子案例简单入门
Vue 中使用 Echarts 简单入门——小白必看
vue-quill-editor 富文本编辑器在 Vue 中最简单使用

这篇文章主要介绍插槽的使用小案例
新建 Vue 项目，以 default (babel, eslint) 模式进行安装，删除 Helloworld.vue 相关代码，新建 SlotTest.vue，

SlotTest.vue

<template><div>App.vue 会将 Slot 标签里的内容传递过来:<slot></slot></div>
</template><script>export default {
     name: "SlotTest"} </script><style scoped></style>

在 App.vue 中引入 SlotTest.vue，并在 SlotTest标签内写好要传递的内容，

App.vue

<template><div id="app"><SlotTest><h1>我写在App.vue里面</h1></SlotTest></div>
</template><script> import SlotTest from "./components/SlotTest"; export default {
     name: 'App',components: {
     SlotTest} } </script><style></style>

运行结果如图所示：
在这里插入图片描述

在此基础上，对具名插槽进行展示，SlotTest.vue 中需要定义 slot 的 name，

SlotTest.vue

<template><div>App.vue 会将 Slot 标签里的内容传递过来<slot name="header"></slot><slot></slot></div>
</template><script>export default {
     name: "SlotTest"} </script><style scoped></style>

在 App.vue 中引用相应的 name，写在 template 标签里

App.vue

<template><div id="app"><SlotTest><!-- 具名插槽 --><template v-slot:header><h1>我是具名插槽</h1></template><h1>我写在App.vue里面</h1></SlotTest></div>
</template><script> import SlotTest from "./components/SlotTest"; export default {
     name: 'App',components: {
     SlotTest} } </script><style></style>

在这里插入图片描述