让我们先了解一下插槽
在开发中，我们会经常封装一个个可复用的组件：
之前，您将通过props将数据传递给组件，并向其展示，但是为了提高此组件的通用性，不能将组件的内容限制为固定的div、span等元素。 我们需要让用户决定某个区域包含哪些内容和元素？如何使用插槽插槽？ 插槽的使用过程其实是提取共性，预约不同； 我们仍然在汇编中封装共同的元素、内容； 此外，在封装组件中，使用slot作为占位符来确定外部要显示的元素，可以使用特殊元素为封装组件打开插槽。 此插槽的插入内容取决于父组件的使用方式，基本使用插槽
App.vue
template div my-slot-cpn button我是按钮/button/my-slot-CPN my-slot-CPN//my-slot-CPN H2我是插槽的my-slot-CPN my-slot-CPN/my-slot-CPN/div/templatescriptimportmyslotcpnfrom './myslotcpn.importmyinputcppnffrom 导出默认{ name : ' app '，components: { MySlotCpn，MyInputCpn }，methods: {}，}；/scriptstylescoped/style http://www.Sina.com /
template div h3组件的开始/h3 slot i我在插槽中，没有填写信息。 我退出默认的/i /slot h3组件/H3/div/templatescriptexportdefault { }；/scriptstylelang=' scss ' scoped/style 3358 www.Sina.com /
templatedivinputtype=' text ' placeholder='我在输入框'//div/templatescriptexportdefault { }；/scriptstylelang=' scss ' scoped/style使用命名插槽-动态插槽命名插槽的踏实边缘是命名插槽，元素为特殊的属性： name； 没有name的slot将被命名为默认名称； 可以通过v-slot:[dynamicSlotName]方式动态绑定名称
使用命名的插槽时省略：
和v-on和v-bind一样，v-slot也有缩写
即，将参数前面的所有内容(v-slot: )改为字符#；
templatedivnar-bar : name=' name ' template v-slot : left我在左边/templatetemplatev-slot 3360 center我在中间templatetemplatev-slot : right我在右边的插槽/template template #[name]我在语法糖和动态插槽/template/NAR-bar/div
e: "lisi", }; }, components: { NarBar, },};</script> <template> <div> <div class="nav-bar"> <div class="left"><slot name="left"></slot></div> <div class="center"><slot name="center"></slot></div> <div class="right"><slot name="right"></slot></div> <div class="name"><slot :name="name"></slot></div> </div> </div></template><script>export default { props: { name: String, },};</script> 渲染作用域在Vue中有渲染作用域的概念：
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的； 案列 认识作用域插槽但是有时候我们希望插槽可以访问到子组件中的内容是非常重要的：
当一个组件被用来渲染一个数组元素时，我们使用插槽，并且希望插槽中没有显示每项的内容；这个Vue给我们提供了作用域插槽；使用步骤
ShowNames.vue
App.vue
<template> <div> <nar-bar :name="name"> <template v-slot:left> 我是左边的插槽 </template> <template v-slot:center>我是中间的插槽</template> <template v-slot:right>我是右边的插槽</template> <template #[name]>我是语法糖和动态插槽</template> </nar-bar> <hr /> <show-names :names="names"> <template v-slot="names"> <p>{{ names.item }}-{{ names.index }}</p> </template> </show-names> <hr /> // 如果我们有默认插槽和具名插槽，那么按照完整的template来编写 <show-names :names="names"> <template v-slot="slotProps"> <span>{{ slotProps.item }}---{{ slotProps.index }}</span> </template> </show-names> <hr /> // 果我们的插槽只有默认插槽时，组件的标签可以被当做插槽的模板来使用，这样，我们就可以将 v-slot 直 接用在组件上 <show-names :names="names" v-slot="slotProps"> <button>{{ slotProps.item }}-{{ slotProps.index }}</button> </show-names> <hr /> <show-names :names="names"> <template v-slot="slotProps"> <button>{{ slotProps.item }}-{{ slotProps.index }}</button> </template> //如果我们的插槽是默认插槽default，那么在使用的时候 v-slot:default="slotProps"可以简写为vslot="slotProps"： <template v-slot:lisi> <h2>我是name的插入内容</h2> </template> </show-names> </div></template><script>import NarBar from "./NarBar.vue";import ShowNames from "./ShowNames.vue";export default { name: "App", data() { return { names: ["hxddg", "wjdsy", "qxdxx", "pcdhmg", "ysddy"], }; }, components: { NarBar, ShowNames, },};</script>