this.$listeners在vue项目中的使用

写在前面

在我们写项目的过程中，经常碰到要做增删改查的功能，这些其中像添加，修改，预览这些功能弹出的界面简单就直接写，但一般情况下我们都需要单独封装一个子组件，并将其引入主页面也就是父组件中使用。
我发现这些功能最后在提交确认时都需要有关闭弹窗并且重新渲染数据的过程，一般我们会使用子传父this.$emit(‘xxxx’,xxxx)来调用父组件中的关闭弹窗和重新渲染页面的功能，就很麻烦,所以我们来看看

this.$listeners在vue项目中的使用

this.$listeners: 自动会收集所有加在这个组件上的事件监听

不多BB，上代码

在子组件里面写编辑和添加的功能。

 // 做编辑
    async doUpdate() {
      const data = {
        ...this.formData,
        id: this.ArticleId
      }
      const res = await update(data)
      console.log('编辑功能update返回的数据', res)
      this.emit()
    },

    // 做添加
    async doAdd() {
      try {
        const res = await add({
          ...this.formData
        })
        console.log(res)
        this.emit()
      } catch (err) {
        console.log(err)
      }
    },
    // 告诉父组件完成了调用父组件中的方法
    emit() {
      // this.$listeners: 自动会收集所有加在这个组件上的事件监听
      this.$listeners.close && this.$emit('close')
      this.$listeners.refresh && this.$emit('refresh')
    },

父组件代码在这

<template>
   <el-dialog :title="cTitle" :visible.sync="isShowDialog" v-if="isShowDialog">
     <articleAdd ref="editUser" :ArticleId="curArticlesId" @close="isShowDialog=false" @refresh="loadArticles"></articleAdd>
   </el-dialog>
</template>
<script>
import articleAdd from './myhappycomponents/article-add.vue'

export default {
data(){
   return:{
   isShowDialog:false
   }
}
 method:{
 // 获取列表数据
    async loadArticles() {
      this.isLoading = true
      // 构建查询参数
      const paramsObj = this.buildParams()

      try {
        const res = await getArticles(paramsObj)
        console.log(res)

        // 获取数据给articles
        this.articles = res.data.items
        // 获取总条数
        this.total = res.data.counts
        this.isLoading = false
      } catch (err) {
        console.log(err)
        this.isLoading = true
      }
    }
}

从上面代码可以看到当我们再做添加，修改，预览这些功能的关闭弹窗并且重新渲染数据不用父传子了直接用this.$listeners，它本质是一个对象，内容是父组件在子组件上绑定的所有事件，所以通过触发

this.$listeners.父组件绑定在子组件上的事件名

就可以实现子组件控制父组件中的方法

来吧，试试看