vue选择元素绑定点击事件,vue按钮绑定事件

　　本文主要介绍vue如何将点击事件绑定到自定义组件，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

目录

　　将点击事件绑定到自定义组件将点击事件添加到自定义组件

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

　　在做项目的时候，我们经常会封装很多组件来降低代码的可重复性，提高代码的可用性。有时，我们将事件绑定到组件，但它们经常失败。

　　首先，将click事件绑定到cardinfo组件。

　　信息

　　:content=content

　　:from=from

　　:ProPortrait=ProPortrait

　　/

　　一般click事件都是这样给出的，但是有时候这个事件是没用的，因为这个事件指的是组件页面，而不是组件本身，所以在组件中无法识别这个事件的来源。

　　信息

　　@click=goodclick

　　:content=content

　　:from=from

　　:ProPortrait=ProPortrait

　　/

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

　　信息

　　@click.native=goodclick

　　:content=content

　　:from=from

　　:ProPortrait=ProPortrait

　　/

给自定义组件添加单击事件

　　我自己定义了一个按钮按压组件。

　　模板

　　差异

　　div class=endBtn

　　van-button type= danger block color=线性渐变(向左，#F24B0B，#FF4A44 ){{btnMsg}}/van-button

　　/div

　　/div

　　/模板

　　脚本

　　导出默认值{

　　名称： UiEndbutton ，

　　道具：[btnMsg]，

　　data() {

　　返回{

　　};

　　},

　　已安装(){

　　},

　　方法：{

　　},

　　};

　　/脚本

　　style lang=stylus 范围。endBtn

　　宽度：345像素

　　高度：44px

　　边框半径：4px

　　背景：径向渐变(#F24B0B 100%，# ff4a 44 100%)；

　　页边距-顶部：15px

　　左边距：15px

　　/风格

　　在其他页面中引用此组件。

　　从别处引进

　　从“@/components/EndButton.vue”导入EndButton

　　导出默认值{

　　名称： UiEndyuyuetransfer ，

　　组件：{

　　页面顶部，

　　YuyueDetailItem，

　　结束按钮，

　　},

　　方法：{

　　toendyuyuyuetransferresult(){

　　这个。$ router . push({ name: EndYuyueTransferResult })

　　}

　　}

　　}

　　在页面中

　　end-button btnMsg= termination @ click= toendyuetransferresult /end-button

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

　　将事件绑定到vue组件时，必须添加native，否则会认为你在监听Item组件定义的事件。

　　end-button BTN msg= termination @ click . native= toendyuyuetransferresult /end-button

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。