小程序父子组件互相传参，互相调用方法

在这里我们使用page作为页面，使用com作为组件

先巴拉巴拉开始工作，1、小程序根目录新建一个components文件件，然后在其中新建一个com文件夹，然后新建组件。com.json中“component":true,其中组件还可以继续使用子组件，组件套组件，不要太头大！！！"usingComponents": {}，

2、在需要使用组件的page页面的page.json中定义"usingComponents":{"组件名”：“路径”}

3、使用组件名作为标签名，在需要使用的wxml中写入<组件名><组件名/>

 

父组件向子组件传值

1、在组件的properties中声明一个参数，值是个对象，有type（类型）和默认值两个参数.

在com.js文件中

  properties: {
      parentTochild:{type:String}
  }

2、在页面中调用子组件的自定义标签中使用‘变量名’=‘变量值’的写法（要传递变量时，使用{{}}），就将父组件中的参数传递给了子组件

在page.wxml中

<com parentTochild="向子组件传递的字符串，同时也可以使用{{parentdata}}来传递父组件data中的参数"></com>  

3、子组件在需要使用父组件传递的参数的地方使用双大括号就可以直接使用该参数。

在com.wxml中

<text>父组件向子组件传递的{{parentTochild}}</text>

这样子组件就接收到父组件传递给自己的参数了；

子组件向父组件传值（该方法同样是子组件调用父组件）

//这个比较麻烦，太恶心了，可能是我脑子笨，想了好久才想明白

1、在组件的标签中绑定方法名，触发事件。在子组件中声明一个‘自定义方法’，如有处理参数逻辑将逻辑写在方法上面，在方法的最下面使用this.triggerEvent

('子组件的自定义方法名',‘参数1’，‘参数2’)向父组件传递自定义方法及参数，元素上的自定义data参数可在函数中使用e.currentTarget.dataset参数接收。

 

 

com.js中

toParent(e){
      const index = e.currentTarget.dataset.index
      this.triggerEvent('toParent',index)
    },

2、在需要使用的标签上绑定事件，如在button上绑定该自定义方法button bindtap="自定义方法名" button。

com.wxml中

<button bindtap="toParent" data-index="3">向父组件传递参数，调用其方法</button>

3、在父页面中绑定自定义事件（bind子组件自定义事件名）=‘父组件的方法名’。

page.wxml中

<com bindtoParent="toParent" id="test"></com>   //bind后面的toParent就是子组件向父组件映射来的方法。后面的那个""中的toParent是父组件自己的方法

 

4、在父组件中定义接收子组件方法的方法，也就是说，使用子组件的方法就是接收子组件返回的参数，使用e.detail来接收子组件传递的参数

page.js中

toParent(e){   //在这里可以做一些父组件的方法，同时父组件也接收到了子组件向父组件传递过来的参数
    this.setData({
      fromChild:e.detail.index
    })

 

父组件调用子组件的方法

//这个方法应该是没什么很大的用处，纯粹处女心理想要记下来。

 

1、使用组件时将组件带上id，在生命周期onready中使用this.子组件名 = this.selectComponent("#子组件id")

com.js中

childMethod(title){
      wx.showToast({
        title
      })
    }

page.wxml

<com id="test"></com>  

page.js中

onReady(){
    this.com = this.selectComponent("#test")
  },

2、在需要使用子组件方法的地方使用this.子组件名.子组件方法()

page.wxml

<button bindtap="showChildMethod">点击调用子组件的方法</button>

page.js

showCHildMethod(){
    this.com.childMethod(childMethod是要调用的子组件的方法)
  }