一、自定义组件
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:模板的定义
2:模板的引用(wxml,wxss)
3:模板的使用
官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html
二:组件
1:组件的定义 (以往怎么写就怎么写不像模板一个最外面还需家一个template标签 )
2:组件的配置(你需要在哪个页面里面使用组件就在哪个页面的json中配置 )
3:组件的使用
4:传值
组件接收值
5:事件
(1) 在组件wxml中添加事件:
(2) 在组件js中发送:
(3)在父级wxml中:
(4)在父级js中加入处理方法:
(5)也可以在组件中直接加引入的事件