码迷,mamicode.com
首页 > 其他好文 > 详细

vue----slot插槽

时间:2019-02-22 10:22:18      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:属性   插入   添加   显示   color   content   组件   --   vue   

slot插槽
 
使用场景:
  当组件当作标签使用的时候,如果组件标签内部书写了一些需要进行嵌套的代码,就要用到插槽。
 
组件中:
    如果solot没有名字,就会接收所有的嵌套标签,
    如果slot有名字就可以随便更改有名字的标签的显示的位置
-------------------- 
app.vue
<home-com>//组件当作标签使用
        <p>我是home的插槽</p>
        <p>1</p>
        <p slot="two">2</p>//要更改该标签的位置,要加一个slot="two"属性,属性值是自定义的
        <p>3</p>
        <p slot="four">4</p>//要更改该标签的位置,要加一个slot="four"属性,属性值是自定义的
</home-com>
------------------------ 
home.vue
<template>
        <div class="home content">
                首页
                <slot name="two"></slot>//改变name为two的标签的位置
                <slot></slot>
                <slot name="four"></slot>
        </div>
</template>
 

总结:

总结:
    如果在a组件中插入了b组件,在a组件的template中使用b组件,如果将b组件当作标签使用,这时b组件标签中的内容是不会显示的,
这就需要在b组件中使用<slot></slot>,这样才会显示

    如果想改变b组件标签中其他标签的位置,就要给要改变位置的标签添加slot="属性值",在b组件中<slot name="属性值"></slot>,
并将其放在需要改变的位置

 

 

vue----slot插槽

标签:属性   插入   添加   显示   color   content   组件   --   vue   

原文地址:https://www.cnblogs.com/SRH151219/p/10416708.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!