vue----slot插槽

Posted 2021-02-10 srh151219

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>,
并将其放在需要改变的位置