Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { phone: '400-010-9797' }, /** * 组件的方法列表 */ methods: { callPhone() { wx.makePhoneCall({ phoneNumber: this.data.phone }) } } })
step3：使用组件
我们要在index.wxml中使用该组件的话，要在index.json中进行声明：（其中call-phone是组件的名称，可以自取）
{ "usingComponents": { "call-phone": "/components/CallPhone/callphone" } }
在index.wxml中引用组件：
<call-phone></call-phone>
完成以上几个步骤，一个简单的小程序自定义组件就完成了，运行结果如下：
Page与Component数据交互
上面的例子中可以看到，电话号码是在组件中的data中设置的，也就是每个页面都是固定写死的；但是如果要实现每个界面的号码不一样的话，此时就涉及到page往组件传值的问题，可以这么修改：
1、page > component
方法1：page在引用组件时能通过属性值设置，callphone.js在properties获取:
<!--index.wxml--> <call-phone phone="400-010-9797"></call-phone> // components/CallPhone/callphone.js Component({ properties: { phone: String //简写 /* phone: { type: String, //类型,目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型） value: '', //初始值 observer: function(newVal, oldVal) {} } */ }, attached: function() { console.log("this.properties.phone:" + this.properties.phone); //控制台打印:"400-010-9797" }, //... })
方法2：page在引用组件时通data-xxx设置，callphone.js在this.dataset获取：
<!--index.wxml--> <call-phone data-tel="400-010-9797" ></call-phone> // components/CallPhone/callphone.js Component({ attached: function() { console.log("this.dataset.tel:" + this.dataset.tel); //控制台打印:"400-010-9797" // 设置properties值用setData() this.setData({ phone: this.dataset.tel }); }, //... })
2、component > page
组件中的变量要传到page页面，可以通过事件触发this.triggerEvent()来实行：
// components/CallPhone/callphone.js Component({ methods: { callPhone() { var myEventDetail = { msg: '来自component的信息', tel: '400-010-9797' } // detail对象，提供给事件监听函数 var myEventOption = {} // 触发事件的选项 this.triggerEvent('myevent', myEventDetail, myEventOption) } } }) <!--index.wxml--> <!--"bindmyevent"属性与上面"myevent"对应，当自定义组件触发"myevent"事件时，调用"call"方法 --> <call-phone bindmyevent="call"></call-phone> //index.js Page({ call: function(e) { console.log(e.detail.msg);//控制台打印:"来自component的信息" wx.makePhoneCall({ phoneNumber: e.detail.tel }) } })
总结
以上所述是小编给大家介绍的微信小程序自定义组件的实现及数据交互,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: