微信小程序中自定义组件solt的使用

在看了微信小程序自定义组件的使用，然后来看看，在自定义组件中还能做什么

1.调用组件向自定义组件插入内容

我们会发现，在自定义模板中有一对<code><slot></slot></code>,这里是干什么用的呢？在组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点。

例如我在引用组件的时候，像下边图解一样，<code>view</code>中的内容被插到了slot中，

2.调用组件向自定义组件中传递数据

同样，在自定义组件中，其中调用的页面（下面称:父页面）还可以向自定义组件（下面称：子组件）中传递数据， 那么该如何使用呢？

其中在自定义组件的js中的properties中要对传入的数据定义，同样和vue中的slot一样，而在

在自定义组件的结构中，使用数据

<view class="inner" bindtap='customMethod'>
  {{innerText}}
</view>
<view>
  {{color}}....{{propa}}...{{propb}}
</view>
<slot></slot>

最后的渲染结果就像上个图中的结果，

3.多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>

在父组件中使用如下图；

简单的介绍自定义组件的用法，代码比较粗糙，仅仅作为学习的一个笔记。。。。。。。。。