彻底搞懂组件之间的通讯

写这篇文章，是看到网上的很多博客都是第二个人复制第一个人，第三个人复制第二个人，第四个人复制第三个人的，所以，今天特意来写篇关于组件之间通讯的文章，如果有不足之处，还望大家积极提出来。

关于数据传递今天暂时不提，主要写的是关于方法的传递：
父组件可以使用 props 把数据传给子组件。
子组件可以使用 $emit 触发父组件的自定义事件。

父组件传方法给子组件

父组件

<Reply @reset="fetchData" :status="discuss.status"></Reply> 
//将自己的fetchData传给子组件

methods: {
    async fetchData () {
      let { data } = await getDiscussDetailApi(this.$route.params.id)
      this.discuss = data
    }
}

子组件

<a-button class="nimbus-btn" @click="closeDiscuss">关闭主题</a-button>

    async closeDiscuss () {
      let { data } = await toggleDiscussApi(this.$route.params.id)
      cbSuccess(data, _ => {
        this.$emit('reset')   //调用父组件传过来的reset，fetchData方法
      })
    }

子组件调用父组件的方法

父组件

<span class="btn-txt" @click="showAssign">设置指派人</span>
<span v-else class="btn-txt" @click="showAssign">修改指派人</span>
<AssignModal ref="AssignModal"
    :teamId="teamId"
    :userIds="userIds"
</AssignModal>

showAssign () {
    this.$refs.AssignModal.showModal(this.assignors) //调用子组件的showModal
}

子组件

showModal (members) {
      this.assign.userIds = this.userIds
      this.members = members
      this.assignShow = true
    }

子组件调用另一个子组件中的方法（或称为兄弟组件之间的通讯）

父组件

<DiscussReply ref="DiscussReply" class="mb22"></DiscussReply>
<Reply @repled="repled" :status="discuss.status"></Reply> 
        //父再将子组件的方法传给另一个子组件

repled () {
      this.$refs.DiscussReply.fetchData()  //调用子组件中的fetchData
 }

被调用方法的子组件

methods: {
    async fetchData () {
      let { data } = await getDiscussReplysApi(this.$route.params.id)
      this.replys = data.list || []
    }
  }

调用方法的子组件

<a-button class="nimbus-btn" @click="submit('close')">回复并关闭</a-button>
<a-button class="nimbus-btn" @click="submit()">回复</a-button>

async submit (type) {
      let _reply = this.reply
      if (!_reply.content) {
        this.$message.error('请输入内容')
        return
      }
      _reply.discussId = this.$route.params.id
      _reply.type = type
      let { data } = await replyDiscussApi(_reply)
      cbSuccess(data, _ => {
        this.$emit('repled')  //调用父组件传过来的方法
        _reply = {
          content: ''
      }
   })
 }