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>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)