学习微信小程序（3）——组件
2018-05-08 本文已影响36人
BULL_DEBUG
一、自定义组件
1、组件模版和样式
组件模版
组件模版的写法与页面模板相同。组件模版与组件数据结合后生成的节点树，将被插入到组件的引用位置上。
在组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点。
<!-- 组件模板 -->
<view class="wrapper">
<view>这里是组件的内部节点</view>
<slot></slot>
</view>
<!-- 引用组件的页面模版 -->
<view>
<component-tag-name>
<!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
<view>这里是插入到组件slot中的内容</view>
</component-tag-name>
</view>
2、Component构造器
3、组件事件
组件与模板总结：
把模板分为三大部分（定义模板，引入模板， 模板的使用），组件分为四大部分（定义组件，组件的配置，组件的使用，组件的传值）请看图解：
一：模板：
1：模板的定义
image
2：模板的引用（wxml,wxss）
image
image
3：模板的使用
image
官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html
二：组件
1：组件的定义 （以往怎么写就怎么写不像模板一个最外面还需家一个template标签 ）
image
2：组件的配置（你需要在哪个页面里面使用组件就在哪个页面的json中配置 ）
image
3：组件的使用
image
4：传值
image
组件接收值
image
5：事件
(1) 在组件wxml中添加事件:
image.png
(2) 在组件js中发送：
image.png
（3）在父级wxml中：
image.png
（4）在父级js中加入处理方法：
image.png
（5）也可以在组件中直接加引入的事件
