本文目录一览：
1、小程序模板和组件的区别（点击操作事件） 2、微信小程序之组件 3、小程序自定义组件 4、微信小程序创建组件以及父传子、子传父内容 5、小程序使用view组件中bindtap事件data-xxx传值无法获取 6、微信小程序_组件小程序模板和组件的区别（点击操作事件）
小程序在使用时，经常会在不同的页面用到相同的页面结构，这个时候我们如果一个个写的话没有必要，这个时候可以使用模板（template）或者组件（component）。
二者区别 在于：1、需要定义模板：一个template.wxml文件中能写多个模板，用name区分，
下面定义两个模板2、使用这两个模板，在对应的wxml文件引入：
3、上面在模板content里定义了点击事件subtractNum方法，因为template中没有js文件，因此template中的点击事件，在使用页面中的js里定义。
建议将有子列表操作交互的写成component。
示例：
对应组件的wxml跟page里的wxml一样：
2、使用自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径
这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。
下一节将进入如何 组件向父级传值（组件通信）
微信小程序之组件
一.创建并使用组件的步骤
1.创建一个文件夹存放组件，并在里面创建一个组件文件夹，components，tabs
2.在tabs文件里添加组件模板
3.引用组件，在父组件的json文件中的usingComponents中添加子组件路径，compont
4.使用组件，相当于正常标签进行使用
二.父组件向子组件传参的步骤
父组件给子组件的tabs传入对象
1.父组件的数据
2.子组件做的操作
如果没有传入数据，就会输出默认值value
3.子组件展示对象数据：
三.子组件向父组件传参的步骤
1.先给子组件添加一个点击事件
2.通过this.triggerEvent("自定义事件名称",{传的值})命令保证子组件和父组件同步被修改
3.父组件绑定子组件，定义一个事件名称，用来接收子组件传递的数据小程序自定义组件
新手在第一次自定义组件的时候小程序组件事件，首先写出来需要定义的组件的内容和布局小程序组件事件，防止不熟练而出错。
一、新建一个文件夹，自己命名。以后所有的自定义组件都存放于此。
二、在此文件夹下新建一个自行命名的文件夹，命名最好语义化，与里面自定义组件的名字相呼应。
三、在新建的文件夹内新建一个Component文件 命名也是自定义。
四、在xxx里面把事先写好的ml和ss以及js文件复制进去。
1、把提前写好的页面布局复制到这个此文件里面。写法和在普通页面的写法一样 {{}}是插值表达式。这里可以直接使用js里面定义的数据。
eg:
1、组件自定义的属性列表写在 properties里面。需要写成对象的形式
eg:
2、组件的方法列表写在 methods里面
eg:
五、在需要引用自定义组件页面文件的xxx.json里面引用。
注意小程序组件事件：引用的时候，不可以以./开头。前面命名可以自命名，不必和后面名字一样。
六、在需要引用的页面里的的xxx.wxml里写已经命名好的组件。
组件的名字为自定义命名。
eg:
因为组件是自己写的，并非微信提供的官方组件，所以如果想要获取触发事件的话 ，需要写一个同步组件回传数据
触发自定义事件用triggerEvent。在需要调用的方法内写this.triggerEvent(“自定义属性名”，‘需要更新的数据’)
eg:
然后将此事件绑定到页面中。绑定事件需要用bind:自定义的方法名=“js中定义的方法”
利用data-active="变量名"属性添加需要变化的变量
eg:
xxx.wxml内写法小程序组件事件：
注意：想要在页面中使用自定义的组件属性时，必须要现在定义组件的文件夹内的js文件中，先去定义属性，然后才可以引入使用。微信小程序创建组件以及父传子、子传父内容
一、小程序创建组件过程
1、首先创建一个components目录，下面放文件(组件文件)
2、创建两个组件文件（Listitem和lunbo）
3、在pages文件夹json文件里面，进入对应的模块内引用Listitem和lunbo组件
4、在wxml文件中使用标签属性来引入组件
自定义组件中和页面中的class名重名，是不会产生冲突的；
页面中的class和自定义组件中的class重名；同样不会产生冲突；
二、父传子：
三、子传父：
子组件绑定事件handle事件（bindtap=“handle”）小程序使用view组件中bindtap事件data-xxx传值无法获取
js中获取参数：
checklist: function(e) {
console.info(e.target.dataset.name)
}
无法获取，可以修改为：
checklist: function(e) {
console.info(e.currentTarget.dataset.name)
}微信小程序_组件
1.基础组件：
什么是组件：
和结束标签
，属性
用来修饰这个组件，内容
在两个标签之内。
</ul2.属性类型
，只有组件上没有写该属性时，属性值才为false
。如果属性值为变量，变量的值会被转换为Boolean类型
, 2.5
是 Page中定义的事件处理函数名
</ul3.共同属性类型
id , class , style , hidden , data-* , bind* / catch*
4.特殊属性
几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰
5.组件列表
基础组件分为以下八大类：
视图容器(View Container)：
view 视图容器 , scroll-view 可滚动视图容器, swiper 滑块视图容器基础内容(Basic Content)：
icon 图标, text 文字, progress 进度条表单(Form)：
button 按钮, form 表单， input 输入框， checkbox 多想选择器, radio 单选器， picker 列表选择器, slider 滚动选择器, switch 开关选择器, label 标签.
操作反馈（Interaction）
action-sheet 上拉菜单
modal 模态弹窗
toast 消息提示框
loading 加载提示符导航Navigation
navigator 应用链接
多媒体(Media)
audio 音频, image 图片， video 视频
** 地图 **map 地图
画布Canvas
canvas 画布flex: vt.折曲，使收缩； vi.玩去，收缩
关于小程序组件事件和小程序组件事件分析的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 小程序组件事件的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于小程序组件事件分析、小程序组件事件的信息别忘了在本站进行查找喔。
