vue怎么給自定義的組件綁定點擊事件

這篇文章主要介紹“vue怎么給自定義的組件綁定點擊事件”，在日常操作中，相信很多人在vue怎么給自定義的組件綁定點擊事件問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue怎么給自定義的組件綁定點擊事件”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

給自定義的組件綁定點擊事件

在做項目中我們往往會封裝許多的組件，來減少代碼的重復(fù)性，提高代碼的可利用性，有時候也會給組件綁定事件，但是經(jīng)常會失效。

先給cardinfo這個組件綁定一個點擊事件

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

一般都是這樣給點擊事件，可是有時候這個事件是沒用的，因為這個事件是引用組件頁面的事件，而不是組件本身的事件，所以組件內(nèi)不能識別這個事件的來源。

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

在@click后面加native表示的是當(dāng)前頁面的事件

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

點擊按鈕你會發(fā)現(xiàn)，方法沒有被觸發(fā)。

給vue組件綁定事件時候，必須加上native ，否則會認(rèn)為監(jiān)聽的是來自Item組件自定義的事件。

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

到此，關(guān)于“vue怎么給自定義的組件綁定點擊事件”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>