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>

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

原文地址:https://www.cnblogs.com/hou-yuan-zhen/p/11883346.html