VUE在组件的引用页面给组件添加事件

当我们在某个页面应用引用组件的时候，想要给这个引入的组件添加一些事件，像这样

<cardinfo  @click="goodclick" />

但是这样可能是无效的，因为这个事件是引用组件页面的事件，而不是组件本身的事件，所以组件内不能识别这个事件的来源。
在@click后面加native表示的是当前页面的事件

<cardinfo @click.native="goodclick" />

另外，如果我们想，在任意页面都能直接写时间监听的话，可以直接在组件的属性中添加v-on='$listeners'

表示组件内部不对其做事件监听，在哪个地方监听，都可以使用
还有一种方式就是通过，组件内发送自定义事件
1.首先在组件内部监听事件。
2.通过this.$emit(‘click’)发送事件
3.父级处理事件

用ts编写vue时

@Emit('click') private emitClickEvent(event:MouseEvent){}   // 可以发送事件对象
private onclick(event:MouseEvent){
  this.emitClickEvent(event:MouseEvent)
}

例：
组件定义（子组件），封装antd-vue的按钮

<template>
  <a-tag :color="typeObj[type]" v-on="$listeners"><slot /></a-tag>
</template>

<script>
export default {
  name: 'Button', //自定义的button
  props: {
    type: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      typeObj: {
        blue: '#F37020',//蓝色
        green: '#03bb7a',//绿色
        grey: '#9D9D9D',//灰色
        orange: '#F37020',//橘色
        red: '#FD4D4F'//红色
      }
    }
  }
}
</script>

组件引用（父组件）调用，可以直接绑定事件

<Button type="blue" @click="addVisible = true">修改</Button>

摘自：https://blog.csdn.net/xk_initial/article/details/108428804