刚开始看了官方的demo,利用注册component在父页面中的子组件标签中插入内容,达到灵活定制的目的。然而,确实不好理解,所以,就vue常用的组件与页面分开写的方式,我写了一个demo举例说明slot的作用。

     
本人刚接触vue不就,感觉slot类似与一个内容占位符,在子页面中利用slot进行占位,在父页面调用时,使用不同的内容去填充这个占位符,从而达到一个组件,多个页面复用的目的。

     我们来看例子:

      1.首先是子组件 tempComp.vue


      
<template> <div> <p>child self</p> <slot name="first"></slot> </div></template>
<script>export default { }</script><style scoped></style>

     2.再就是调用页面LocSlot.vue


<template> <div> <p>parent content</p> <tem-comp> <div slot="first"> <ul> <li>1
</li> <li>2</li> <li>3</li> </ul> </div> </tem-comp> </div></template><script>
import temComp from './temComp.vue'export default { components: { temComp }}</
script><style scoped></style>
好的,现在我们来说明一下,首先在tempComp中,<slot
name="first"></slot>进行占位处理,这个地方允许,父页面中,<tempComp>标签间,名为slot="first"的内容进行显示。再来看我们的父页面,也就是调用页面,在标签中插入内容区域div,并给他命名为slot="first
"去填充子组件的占位。

需要知道的是,默认情况下,父页面中的,子组件间加入的内容时不会显示的,除非有占位符这个东东。


当然,上面例子举出的是具有实际名字的slot占位,其实还有一种默认的占位slot,即不给子组件中的占位符slot进行命名即可。那么父页面中,默认会将子组件中的第一个插入内容放置在默认占位符的位子,但是,如果插入数量超过默认占位符数量,则剩余的部分就不显示了。

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信