~~

其实做小程序开发已经有一段时间了，但是说实话，我目前还没有自己写过一个完整的组件，这有很多方面的原因，

1、我个人对自定义组件的理解还没有完全吃透，

这里面最让我困惑的一点就是

子组件如何调用父组件里面的方法以及父子组件之间的通信，，也许是官方文档写的不好，也许是我理解能力有问题，之前一直没有吃透，今天爬起来，就开始找关于自定义组件的资料进行学习

~~

很不错找到了一篇文章，不是这个文章写的多好，而是有些作者自己的理解写到文章里面，我看到这个理解，瞬间也解决了困扰我多年的疑惑。

就是下面标记红色加粗的地方

~~

一、通过组件调用页面里面的方法：

我们这里用header组件和user页面来举例：

    1.先在header组件js页面的methods中，写一个方法，然后用triggerEvent给监听的事件起一个名字，这里叫做run

    2.在header.wxml中，使用bindtap绑定这个getUserFn方法，一般会绑定到按钮上

    3.在user.wxml中，调用header组件，并且bind:run="user组件中的方法名"

组件逻辑header.js

~

methods: {
    
    getUserFn(){
      const myEventDetail = {} // detail对象，提供给事件监听函数
 
      this.triggerEvent("run", myEventDetail)
      //第一个参数，就是给这个事件起个名字，要在组件的bind后面用，第二个参数是传入数据，还有第三个参数冒泡啥的
    }

~

组件页面header.wxml:

~

通过组件使用USERS里面的方法

~

用户页面user.wxml：bind后面的run就是我们在triggerEvent中，给事件起的名字，后面的test，就是我们要调用的user.js中的方法

~

~

用户逻辑user.js：

~

test(){
    console.log("我是user.js中的test方法")
}

~

二、通过页面，调用组件中的方法：

  通过user页面，调用header组件：

  1.在user页面中使用header组件，给他起一个ID

  2.在user.js中，获取到这个组件（实例化）

  3.通过实例化的对象，即可调用组件中的方法

用户页面user.wxml

<header id="header"><header> //在页面中调用组件，然后给他起个ID

<button bindtap="useComponentFn">通过页面调用组件中的方法</button>

用户逻辑user.js

  onLoad: function(options) {

    this.header = this.selectComponent("#header"); //这里是实例化了header,通过header，我们就能调用header组建中的方法

  },

  useComponentFn(){

    this.header.componentFn();//调用了组建中的componentFn方法  

  }

组件逻辑header.js中的method中

componentFn(){

    console.log("我是header中的方法")

}

~