源码搜藏网

给自定义的组件绑定点击事件

在做项目中我们往往会封装许多的组件，来减少代码的重复性，提高代码的可利用性，有时候也会给组件绑定事件，但是经常会失效。

先给cardinfo这个组件绑定一个点击事件

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

一般都是这样给点击事件，可是有时候这个事件是没用的，因为这个事件是引用组件页面的事件，而不是组件本身的事件，所以组件内不能识别这个事件的来源。

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

在@click后面加native表示的是当前页面的事件

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

点击按钮你会发现，方法没有被触发。

给vue组件绑定事件时候，必须加上native ，否则会认为监听的是来自Item组件自定义的事件。

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持源码搜藏网。