How to bind click events to custom components for vue

Bind click events for custom components

When working on projects, we often encapsulate many components to reduce the repetition of the code and improve the availability of the code. Sometimes we will bind events to the components, but they will often fail.

First bind a click event to the cardinfo component

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

This is usually the case for click events, but sometimes this event is useless because this event is an event that references the component page, not an event of the component itself, so the source of this event cannot be identified within the component.

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

Add native after @click to indicate the event of the current page

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

Add a click event to a custom component

Define a button press component yourself

<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>

Reference this component on other pages

Introduced

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

In the page

&lt;end-button btnMsg="termination" @click="toEndYuyueTransferResult"&gt;&lt;/end-button&gt;

Click the button and you will find that the method is not triggered.

When binding events to vue components, native must be added, otherwise it will be considered that the event that is being listened to from the Item component.

&lt;end-button btnMsg="termination" @="toEndYuyueTransferResult"&gt;&lt;/end-button&gt;

The above is personal experience. I hope you can give you a reference and I hope you can support me more.