微信小程序自定义组件封装及父子间组件传值的方法

前端之家收集整理的这篇文章主要介绍了微信小程序自定义组件封装及父子间组件传值的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议 wxzx-xxx 命名

官网地址:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

例如,我们封装的组件名为 **wxzx-loadmore

wxzx-loadmore.wxml

这里就是把index.wxml中的需要封装成组件的代码原样copy过来

wxzx-loadmore.js

属性列表 */ properties: { response: { type: String,value: '' },is_loadmore: { type: Boolean,value: false },tip: { type: String,value: '我是有底线的' } },/** * 组件的初始数据 */ data: {

},/**

  • 组件的方法列表
    /
    methods: {
    emit: function(data) {
    // 自定义组件向父组件传值
    let val = data,my_event_detail = {
    val: val
    }
    // myevent自定义名称事件,父组件中使用
    this.triggerEvent('myevent',my_event_detail)
    /

    在父组件中写上bind:myevent="get_emit",在父组件中就需要调用get_emit事件
    */
    },}
    })

index.wxml 父组件

index.js 中

index.json 这里需要引入组件,在哪个父页面中引用子组件,就在哪个json文件中引入

父组件向子组件传参

声明:A组件为父组件,B组件为子组件,以下是A组件向B组件传参:

在A组件中引入B组件

在A组件的json中写入:

在A组件的wxml中写入:

我是组件A 子组件内容

在B组件的js中写入:

behaviors: [],properties: {
paramAtoB:String
},data: {

},// 私有数据,可用于模版渲染

// 生命周期函数,可以为函数,或一个在methods段中定义的方法
attached: function () { },moved: function () { },detached: function () { },methods: {

}

})

即在properties中定义A组件要传过来的参数类型

在B组件的wxml中写入:

我是组件B A中传入的参数:{{paramAtoB}}

总结: A组件向B组件传参,实际上就是在A组件中引入B组件的时候,带上一个属性paramAtoB,并且给其赋值,然后B组件通过这个属性名称paramAtoB,获取其值

子组件向父组件传参

声明:A组件为父组件,B组件为子组件,以下是B组件向A组件传参:

要让子组件给父组件传参,首先得在父组件引入子组件的时候,加个触发事件,如下:

在父组件A中wxml:

我是组件A A组件内容 B组件传入参数:{{paramBtoA}}

myevent就是绑定的触发事件

在父组件A中js:

behaviors: [],properties: {

},methods: {
onMyEvent:function(e){
this.setData({
paramBtoA: e.detail.paramBtoA
})
}
}

})

onMyEvent就是当被子组件触发时的函数

在子组件B中wxml:

我是组件B A中传入的参数:{{paramAtoB}}

button按钮点击事件一触发,就可以传入参数进入父组件A中,在子组件B中js:

behaviors: [],methods: {
change:function(){
this.triggerEvent('myevent',{ paramBtoA:123});
}
}

})

this.triggerEvent就是按钮点击之后执行的事件,触发myevent事件,传入参数paramBtoA进入父组件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的微信小程序相关文章