这篇文章主要介绍“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怎么给自定义的组件绑定点击事件”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
