zoukankan      html  css  js  c++  java
  • Vue插槽的理解学习

    插槽的显示与不显示,以及怎样显示由父组件来决定;

    但是插槽显示的位置却是由子组件自身决定的,槽写在组件模板的什么位置,父组件传过来的模板将来就显示在什么位置。

    子组件:

    定义模板,使用插槽占位

    <view>

      <slot name="left">{{LE}}</slot>

      <slot name="middle">{{MI}}</slot>

      <slot name="right">{{RE}}</slot>

    </view>

    props:{

      LE:{

        type:

        defalut:

        },

       

      MI:{

        type:

        defalut:

        },

      

      RE:{

        type:

        defalut:

        },

    }

    父组件中调用子组件:

      先引入子组件,注册到components上,然后标签引入,最后如何传值:

    例如注册的标签,传值

        <M-view  LE="左边"  MI="右边"  RE="右边">

        </M-view>

    上面是普通的,

    下面是使用具名插槽,

    (让子组件中左边渲染的是 <  符号)

        <M-view   MI="中间"  RE="右边">

          <template v-slot:LE>

            <view  class="iconfont  icon-left"></view>

          </template>

        </M-view>

    以上是我目前的理解,如果后续问题,我再来补充

  • 相关阅读:
    子元素margin带动父元素拖动
    SideBar---fixed定位
    身份证号码
    正则表达式
    关于encodeURIComponent的用法
    判断用户使用的浏览设备
    获取cookie值
    第五周学习总结
    第四周学习总结
    寻找你的黑客偶像
  • 原文地址:https://www.cnblogs.com/hou-yuan-zhen/p/11883346.html
Copyright © 2011-2022 走看看