vue怎么给自定义的组件绑定点击事件

这篇文章主要介绍“Vue怎么给自定义的组件绑定点击事件”，在日常操作中，相信很多人在vue怎么给自定义的组件绑定点击事件问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue怎么给自定义的组件绑定点击事件”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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

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

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

到此，关于“vue怎么给自定义的组件绑定点击事件”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！