微信小程序自定义组件封装及父子间组件传值的方法
首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议 wxzx-xxx 命名 官网地址:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 例如,我们封装的组件名为 **wxzx-loadmore wxzx-loadmore.wxml 这里就是把index.wxml中的需要封装成组件的代码原样copy过来 wxzx-loadmore.js },/**
index.wxml 父组件 index.js 中 index.json 这里需要引入组件,在哪个父页面中引用子组件,就在哪个json文件中引入 父组件向子组件传参声明:A组件为父组件,B组件为子组件,以下是A组件向B组件传参: 在A组件中引入B组件 在A组件的json中写入: 在A组件的wxml中写入: 我是组件A
在B组件的js中写入: behaviors: [],properties: { },// 私有数据,可用于模版渲染 // 生命周期函数,可以为函数,或一个在methods段中定义的方法名 } }) 即在properties中定义A组件要传过来的参数类型 在B组件的wxml中写入: 总结: A组件向B组件传参,实际上就是在A组件中引入B组件的时候,带上一个属性paramAtoB,并且给其赋值,然后B组件通过这个属性名称paramAtoB,获取其值 子组件向父组件传参声明:A组件为父组件,B组件为子组件,以下是B组件向A组件传参: 要让子组件给父组件传参,首先得在父组件引入子组件的时候,加个触发事件,如下: 在父组件A中wxml: myevent就是绑定的触发事件 在父组件A中js: behaviors: [],properties: {
},methods: { }) onMyEvent就是当被子组件触发时的函数 在子组件B中wxml: button按钮点击事件一触发,就可以传入参数进入父组件A中,在子组件B中js: behaviors: [],methods: {
change:function(){ this.triggerEvent('myevent',{ paramBtoA:123}); } } }) this.triggerEvent就是按钮点击之后执行的事件,触发myevent事件,传入参数paramBtoA进入父组件 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |