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>
以上是我目前的理解,如果后续问题,我再来补充