函数也是参数，可以在父子组件中传递

昨天在项目中见识了大佬写的代码之后，我自愧不如，默默地抄起笔记本

简单描述：有一个组件X，A功能页面和B功能页面都要用到，但是两个页面向后台请求的接口完全不一样，而点击事件又在组件X内部。有人可能说这简单啊，把地址和data数据通过父子组件的传递方式传过去就好啊（确实我一开始就是这么写的），但是接口太多，数据又很杂，看得眼花缭乱，维护性不好，不采取。经过大佬的键盘一改造，好家伙，直接传函数，把点击事件的函数直接传给子类，给我惊呆了！（因为太菜，没有试过这种写法，像极了没见过世面的乡巴佬  !@_@!）

下面简单记一下：

父组件调用子组件：定义一个完整的函数 ，绑定传给子组件

<div>
<xy-ClientLink style="margin-left: 150px;" 
            :appId="appId" 
            :listClientFunction="listClientFunction"
            ref="client-link"></xy-ClientLink>
</div>

.
.
.
.....

// 方法 methods内
methods: {

     // 渠道绑定
    linkClientFunction(data = {}, cb) {
      const param = {
        appId: this.appId,
        portalId: this.portalId,
        clientId: data.value
      }
      this.$postStream('接口地址', {
        data: param,
        success: (res) => {
          cb && cb(res)
        }
      })
    },


}

xy-ClientLink 子组件：

// 子组件中接收
.....
.....
props:{
    // 渠道绑定处理函数接收
    linkClientFunction: {
      type: Function
    },
}

.....
.....
.....
// methods:{}
methods: {

     // 渠道绑定
    linkClient(item) {
      this.clientInfoPostLoading = true
      // 渠道绑定函数
      this.linkClientFunction({
        value: item.value
      }, (res) => {
        if (res.success) {
          this.$message.success('关联成功')
        } else {
          console.error(res.message)
          this.$message.error('关联失败')
          item.isSelect = false
        }
        this.clientInfoPostLoading = false
      })
    },

}