学习微信小程序(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)也可以在组件中直接加引入的事件

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容