1 创建一个文件夹,这个文件夹用来存放所有自定义组件 2 每个组件都用一个文件夹包裹,模拟pages的方式来管理自定义组件 3 在页面引用自定义组件,必须先在page.json中注册我们自定义组件 page.json { "usingComponents": { "com" : "/componentes/com/com" } } 4 在wxml中就可以直接使用了 <com></com>
页面向组件传值
1、组件中的wxml文件肯定有一个变量来接收页面的传值 <!-- name值是由页面决定的 --> <view>{{name}} is dsb</view> 2、我们要在组件的js文件中给这个name变成组件的属性: properties: { name:{ //属性名 type:String, //属性的类型 value:"egon" // 属性的默认值,如果页面没有给这个name赋值,就使用这个value的值 } }, 3 页面的wxml文件中直接给这个组件的name属性赋值就可以了,就相当于传值 <com name = "bob"></com> //可以是固定值 <com name = "{{name1}}"></com> //这里的可以是变量
组件向页面传递事件
1 组件要绑定一个事件 写法如下 <button bindtap="com_jia" data-num="1">点我加1</button> 2 在组件的js中的中: /** * 组件的方法列表 */ methods: { com_jia:function(e){ console.log("con-jia",e) //把事件抛给页面 this.triggerEvent("jia1",{num:e.currentTarget.dataset.num}) //jia1是组件向页面抛出的事件类型。所以我们在页面重要去捕获这个事件,如果我们要向页面抛事件时候,传参数,例如:{num:e.currentTarget.dataset.num} } } 3 页面中如何捕获组件中传过来的事件; <com bind:jia1 ="jia"></com> 4 页面的事件的响应函数 jia:function(e){ console.log(e)//组件传过来的参数,在e.detail中 var that = this that.setData({ num : that.data.num + +(e.detail.num) }) }
来源:https://www.cnblogs.com/baohanblog/p/12466962.html