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


Posted in Vue.js onApril 21, 2022

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

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

先给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.js 相关文章推荐
Vue实现图书管理小案例
Dec 03 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
Vue详细的入门笔记
May 10 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
vue组件vue-esign实现电子签名
Apr 21 #Vue.js
vue动态绑定style样式
Apr 20 #Vue.js
Vue OpenLayer测距功能的实现
vue 给数组添加新对象并赋值
Apr 20 #Vue.js
vue 数字翻牌器动态加载数据
Apr 20 #Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 #Vue.js
vue封装数字翻牌器
Apr 20 #Vue.js
You might like
PHP 和 MySQL 基础教程(三)
2006/10/09 PHP
SSI指令
2006/11/25 PHP
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
JS字符串函数扩展代码
2011/09/13 Javascript
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
go语言计算两个时间的时间差方法
2015/03/13 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
python如何停止递归
2020/09/09 Python
英国剑桥包官网:The Cambridge Satchel Company
2016/08/01 全球购物
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
廉洁自律承诺书
2014/03/27 职场文书
教师考核评语大全
2014/12/31 职场文书
2016党员入党决心书
2015/09/22 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
Kubernetes控制节点的部署
2022/04/01 Servers
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js