zoukankan      html  css  js  c++  java
  • vue----slot插槽

    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>,
    并将其放在需要改变的位置
     
  • 相关阅读:
    使用httputils上传图片到服务器
    Android与服务器http连接模块代码
    简单的三次登陆和入门级九九乘法表的实现
    简单购物车的实现
    python常见数据类型
    python基础一
    python入门一
    python简介
    day1 java基础语法
    LeftStr函数使用
  • 原文地址:https://www.cnblogs.com/SRH151219/p/10416708.html
Copyright © 2011-2022 走看看