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表单验证之禁止input输入框输入空格
Dec 03 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
vue递归实现树形组件
Jul 15 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 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中jpgraph类库的使用介绍
2013/08/08 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
yepnope.js 异步加载资源文件
2011/09/08 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
Python3中多线程编程的队列运作示例
2015/04/16 Python
深入学习Python中的装饰器使用
2016/06/20 Python
关于Python数据结构中字典的心得
2017/12/04 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
写好自荐信的要点
2013/11/06 职场文书
营销总监岗位职责
2014/09/16 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
如何用python清洗文件中的数据
2021/06/18 Python
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS