Vue插槽slot的三个系列解析
Vue框架系列笔记,在做项目时候遇到新的知识和难点知识的记录
vue当中的插槽,指的即是slot,是组件当中的一块HTML模板。该模板是否显示,以及如何显示由其父组件说了算。不过插槽显示的位置是由子组件决定 ,你将slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块!
- 匿名插槽
父组件
<template>
<div class="One">
<p>我是父组价</p>
<!---引用子组件-->
<child>
<div>我是匿名插槽,我在这儿显示</div>
</child>
<!----
-->
</div>
</template>
子组件
<template>
<div class="child">
<p>我是子组件</p>
<!---定义插槽的位置-->
<slot></slot>
</div>
</template>
- 具名插槽
以下是文章链接,具体的插槽说明:https://www.jianshu.com/p/1a55faa3c3a9