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>

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

  • 相关阅读:
    Linux下并发网络设计之I/O复用
    嵌入式系统 Boot Loader
    linux下curl编程
    c语言中-----分配内存函数
    关于typedef之四种用途 和 两个陷进
    Libcurl安装及编译
    linux线程之pthread_join和pthread_detach
    Linux系统源码安装过程中的prefix选项
    linux之线程之互斥
    linux之线程
  • 原文地址:https://www.cnblogs.com/hou-yuan-zhen/p/11883346.html
Copyright © 2011-2022 走看看