学习微信小程序（3）——组件

一、自定义组件

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）也可以在组件中直接加引入的事件