咫尺资讯站一一为您提供时下热门前沿动态

查看更多
首页> 微信小程序资讯> 小程序组件传值,小程序自定义组件间传值

小程序组件传值,小程序自定义组件间传值

阅读:468微信小程序

微信小程序组件传值,小程序自定义组件间传值

一、父组件向子组件传值

即WXML 数据绑定:用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容数据(自基础库版本 2.0.9 开始,还可以在数据中包含函数)。
1、流程梳理:

父组件father.通过数据绑定的形式进行属性设置(grade)与赋要传的值(rank)。

 
子组件son
第一步:在properties中进行属性名设置。properties为组件的对外属性,是属性名到属性设置的映射表。这样我们就能映射到(找到)此处的grade~
properties:{
    grade:{
      type:Number
    }
  },
第二步:接下来可以使用grade了,使用与data中的数据是一样的方式,即this.data.grade;只是data是组件的内部数据,properties是组件的对外属性.它们都可用于组件的模板渲染!
说明:其实properties中的值也可以这样访问:this.properties.grade;

2、具体展示:
父组件:
father.wxml:    father.jsComponent({  data:{    rank:1,  }})father.json{  "component": true,  "usingComponents": {    "son": "/pages/son/son"  }}

子组件:son.wxml

子组件页son.jsComponent({  properties:{    grade:{      type:Number    }  },  ready: function () {    console.log("this.data.grade====",this.data.grade);  },})  son.json{  "component": true}


二、子组件向父组件传值
通过事件进行传值,可以传递任意数据。自定义组件可以触发任意的事件,引用组件的页面可以监听这些事件。

1、流程梳理

子组件father绑定一个事件处理函数,然后通过triggerEvent触发指定的事件!this.triggerEvent("sendEvent", "我来自子组件"); // sendEvent自定义名称事件
 
父组件son
第一步:在组件的引用处通过bind/catch绑定triggerEvent指定的事件名(sendEvent);

第二部:接收值
receiveValue:function(res){
      console.log("接收子组件传过来的值" + '....',res.detail)
    }
 

2、代码展示
son.wxml:
点我向父组件传值son.jsComponent({  methods:{    // 向父组件发送值    sendMesgToFather: function(){      this.triggerEvent("sendEvent", "我来自子组件"); // sendEvent自定义名称事件    }  }})

father.wxml

        father.jsComponent({  methods:{    receiveValue:function(res){      console.log("接收子组件传过来的值" + '....',res.detail)    }  }})

最后打印的结果:接收子组件传过来的值.... 我来自子组件.重点说明:

1>由于子组件son是被引入的组件,所以它必须要注册为组件,但是父组件father不一定,把它改成page页面,上面的逻辑也是适用的!不仅是传值,调用方法也一样,father是组件或普通页面,具体见:https://blog.csdn.net/Syleapn/article/details/94591977

2>如果以上两种方式不足以满足需要,父组件还可以通过 this.selectComponent 方法获取子组件实例对象,这样就可以直接访问子组件的任意数据(这个数据包括properties与data中的)和方法了。

【温馨提示】即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至1223636800@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎