vue如何给自定义的组件绑定点击事件

     <cardinfo
        :content="content"
        :from="from"
        :ProPortrait="ProPortrait"
      />

     <cardinfo
       @click="goodclick"
        :content="content"
        :from="from"
        :ProPortrait="ProPortrait"
      />

  <cardinfo
        @click.native="goodclick"
        :content="content"
        :from="from"
        :ProPortrait="ProPortrait"
      />

<template>
  <div>
     <div class="endBtn">
       <van-button type="danger" block color="linear-gradient( to left ,#F24B0B, #FF4A44 )">{{btnMsg}}</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UiEndbutton',
  props:["btnMsg"],
  data() {
    return {
      
    };
  },
  mounted() {
    
  },
  methods: {
    
  },
};
</script>

<style lang="stylus" scoped>
   .endBtn
      width: 345px
      height: 44px
      border-radius: 4px
      background: radial-gradient(#F24B0B  100%,#FF4A44   100%);
      margin-top: 15px
      margin-left: 15px
</style>

import EndButton from '@/components/EndButton.vue';
export default {
  name: 'UiEndyuyuetransfer',
   components:{
     PageTop,
      YuyueDetailItem,
      EndButton,
   },
   methods:{
   toEndYuyueTransferResult(){
   this.$router.push({name:"EndYuyueTransferResult"})
   }
   }
}

<end-button btnMsg="终止" @click="toEndYuyueTransferResult"></end-button>

<end-button btnMsg="终止" @click.native="toEndYuyueTransferResult"></end-button>