在看了微信小程序自定义组件的使用,然后来看看,在自定义组件中还能做什么
我们会发现,在自定义模板中有一对<code><slot></slot></code>,这里是干什么用的呢?在组件模板中可以提供一个 <slot> 节点,用于承载组件引用时提供的子节点。
例如我在引用组件的时候,像下边图解一样,<code>view</code>中的内容被插到了slot中,
同样,在自定义组件中,其中调用的页面(下面称:父页面)还可以向自定义组件(下面称:子组件)中传递数据, 那么该如何使用呢?
其中在自定义组件的js中的properties中要对传入的数据定义,同样和vue中的slot一样,而在
在自定义组件的结构中,使用数据
<view class="inner" bindtap='customMethod'>
{{innerText}}
</view>
<view>
{{color}}....{{propa}}...{{propb}}
</view>
<slot></slot>
最后的渲染结果就像上个图中的结果,
那么还能做什么其他的事情吗,想想在vue中,slot还支持name属性,叫有名插槽,同样在这里也支持name属性,其中要在自定义组件中使用多个slot需要在自定义组件的.js的Component中加入
options: {
<!--在组件定义时的选项中启用多slot支持-->
multipleSlots: true
},
自定义组件wxml内容,最后渲染会把对应的slot渲染到对应的节点中
<view class="inner" bindtap='customMethod'>
{{innerText}}
</view>
<view>
{{color}}....{{propa}}...{{propb}}
</view>
<slot name='frist'></slot>
<slot name='second'></slot>
在父组件中使用如下图;
简单的介绍自定义组件的用法,代码比较粗糙,仅仅作为学习的一个笔记。。。。。。。。。