1.无携带数据，子组件==>触发父组件事件

Gallary.vue子组件页面

<template>
  <div
    class="container"
    @click="handleGallaryClick"
  >
    ....
  </div>
</template>

<script>
export default {
  name: 'Gallary',  
  methods: {
    handleGallaryClick () {
      this.$emit('close') // close 为父组件里自定义事件名
    }
  }
}
</script>

Banner.vue父组件页面

<template>
  <div class="container">
    <common-gallary
      :imgs="imgs"
      v-show="showGallary"
      @close="handleGallaryClose"
    ></common-gallary>
  </div>
</template>

<script>
import CommonGallary from '@common/Gallary'
export default {
  name: 'DetailBanner',
  components: {
    CommonGallary
  },
  methods: {
    handleBannerClick () {
      this.showGallary = true
    },
    handleGallaryClose () { // 触发事件
      this.showGallary = false
    }
  }
}
</script>

2.有携带数据，子组件==>触发父组件事件

Gallary.vue子组件页面

<template>
  <div
    class="container"
    @click="handleGallaryClick"
  >
    ....
  </div>
</template>

<script>
export default {
  name: 'Gallary',  
  methods: {
    handleGallaryClick () {
      this.$emit('close','携带数据值1','携带数据值2') // 可以携带多个值
    }
  }
}
</script>

Banner.vue父组件页面

<template>
  <div class="container">
    <common-gallary
      :imgs="imgs"
      v-show="showGallary"
      @close="handleGallaryClose"
    ></common-gallary>
  </div>
</template>

<script>
import CommonGallary from '@common/Gallary'
export default {
  name: 'DetailBanner',
  components: {
    CommonGallary
  },
  methods: {
    handleBannerClick () {
      this.showGallary = true
    },
    handleGallaryClose (p1,p2) { // 参数用于接收子组件传递过来的值
      this.showGallary = false
      console.log(p1, p2);// 打印出 携带数据值1, 携带数据值2
    }
  }
}
</script>