目录给自定义的组件绑定点击事件给自定义组件添加单击事件给自定义的组件绑定点击事件 在做项目中我们往往会封装许多的组件，来减少代码的重复性，提高代码的可利用性，有时候也会给组件绑定事件
在做项目中我们往往会封装许多的组件，来减少代码的重复性，提高代码的可利用性，有时候也会给组件绑定事件，但是经常会失效。
先给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>以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
--结束END--
本文标题: vue如何给自定义的组件绑定点击事件
本文链接: https://www.lsjlt.com/news/146767.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0