钉钉小程序父组件调用子组件方法（钉钉小程序踩坑实录）

钉钉小程序父组件调用子组件方法

• 页面到底部，父组件触发，调用子组件的方法，加载子组件的数据

解决方法

• 子组件里：

   didMount() {
      this.$page.childComponent = this
    },
  

  在加载生命周期里添加指向，childComponent就是名字，在你的父组件里才能找到。

• 子组件方法：

  methods: {
  	childMethods(){
  		console.log("hello")
  	}
  }
  

  子组件的方法就是正常写，也就是我们即将在父组件里调用的方法

• 父组件里：

   /**
     * 页面被拉到底部
     * */
  
    onReachBottom() {
      this.childComponent.childMethods()	//调用的子组件的方法
    },
  

父组件和子组件之间，怎么相互调用传值？

在小程序 page 页面，自定义组件可以通过 this.$page 拿到小程序页面实例，然后将组件实例挂载到小程序页面实例上进行相互调用。

1. 将父组件、子组件分别挂载到所属页面实例上。

  // 父组件 - /component/fu/fu.js
didMount() {
    this.$page.fu = this; // 通过此操作可以将组件实例挂载到所属页面实例上
  },
//子组件 - /component/zi/zi.js
didMount() {
    this.$page.zi = this; // 通过此操作可以将组件实例挂载到所属页面实例上
  },

1. 通过页面实例实现相互调用。

小程序页面调用父组件、子组件方法：

//调用组件内 method 方法  
this.zi.zimethod()
this.fu.fumethod()
//更改组件内data值
this.fu.setData({
      test:'123'
    })
 this.zi.setData({
      test:'123'
    })

父组件调用子组件内方法：

//调用子组件method方法
this.$page.zi.zimethod()
更改子组件内data值
 this.$page.zi.setData({
      test:'123'
    })

子组件调用父组件内方法 ：

//调用父组件method方法
this.$page.fu.zimethod()
更改父组件内data值
 this.$page.fu.setData({
      test:'123'
    })

以下为解决问题的路程（骂人路程，可忽略不看）

• 钉钉文档写的真的一言难尽，有兴趣可以去观摩观摩，出自大师之手，真的看不懂：神仙钉钉文档
• 网络上查询只有一篇文章是写这个的，（唯一的文章）其他的都是天下文章一大抄，标题写父子通信，好家伙都只写子组件传值给父组件，完了父组件传值子组件都被吃了。
• 上面这个一篇文章提供的思路不错，但是传this过来之后再调用方法，方法的this是指向父组件的，无法指向子组件，所以这个方法只能说在父组件里调用方法，子组件里的data数据都无法使用。
• 最后说一句，支付宝小程序文档YYDS！当你钉钉有问题时你就去支付宝吧！那里才是你永远的家。