小程序自定义组件间传值

墨蓝 2021-11-23 01:34 277阅读 0赞

**一、父组件向子组件传值**

即WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据（自基础库版本 [2.0.9][] 开始，还可以在数据中包含函数）。具体请看[https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html][https_developers.weixin.qq.com_miniprogram_dev_framework_custom-component_wxml-wxss.html]

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.js

Component({
      data:{
        rank:1,
      }
    })

father.json

{
      "component": true,
      "usingComponents": {
        "son": "/pages/son/son"
      }
    }

子组件：

son.wxml

son.js

Component({
      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:

<view bindtap="sendMesgToFather">点我向父组件传值</view>

son.js

Component({
      methods:{
        // 向父组件发送值
        sendMesgToFather: function(){
          this.triggerEvent("sendEvent", "我来自子组件"); // sendEvent自定义名称事件
        }
      }
    })

father.wxml

father.js

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

最后打印的结果：接收子组件传过来的值.... 我来自子组件

**！！！重点说明：**

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

2>如果以上两种方式不足以满足需要，父组件还可以通过 `this.selectComponent` 方法获取子组件实例对象，这样就可以直接访问子组件的任意数据(这个数据包括properties与data中的)和方法了。具体一个简单的示例可以看这个，展示了如何使用~

点击：[微信小程序引用页面调用组件内的方法][https_blog.csdn.net_Syleapn_article_details_94591977]

[2.0.9]: https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html
[https_developers.weixin.qq.com_miniprogram_dev_framework_custom-component_wxml-wxss.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
[https_blog.csdn.net_Syleapn_article_details_94591977]: https://blog.csdn.net/Syleapn/article/details/94591977