位置: IT常识 - 正文

vue如何给组件动态绑定不同的事件(vue移动组件)

编辑:rootadmin
这篇文章主要介绍了vue如何给组件动态绑定不同的事件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教 目录

推荐整理分享vue如何给组件动态绑定不同的事件(vue移动组件),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue移动组件,vue动态组件动画,vue组件加载动画,vue组件加载动画,vue 动态组件,vue组件加载动画,vue3.0动态组件,vue移动组件,内容如对您有帮助,希望把文章链接给更多的朋友!

vue给组件动态绑定不同的事件场景vue组件绑定事件无效下面提供两者方法,可以任选其一vue给组件动态绑定不同的事件场景

根据用户配置的事件动态绑定。也就是用户可以动态选择配置 click ,change,blur等事件

需要根据用户的配置的事件动态绑定 @click、@change或@bulr

vue如何给组件动态绑定不同的事件(vue移动组件)

实际操作代码如下:

<template>  <div>    <el-input v-for="(item,index) in list"        :key="index"        v-on:[item.event]="item.eventName"></el-input>  </div></template><script>export default {    name: "eventPage",    data() {        return {            list: [{ event: "change" ,eventName:"changeName"}]            }        },    methods: {        changeName(){            console.log('change事件')        }    }};</script>

以上动态事件。可以缩写

<el-input @[item.event]="item.eventName"></el-input>vue组件绑定事件无效

在vue中直接在组件上绑定事件是无效的,例如以下代码是无效的:

    <div id="app">        <btn @click='alert(1)'>点击</btn>    </div>    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>    <script>        Vue.component('btn', {            template:`            <button>                <slot></slot>            </button>            `        })        new Vue({            el: '#app',             data() {                return {                }            }        });    </script>

如果一定要直接在组件上绑定事件也是可以实现的,

下面提供两者方法,可以任选其一

1、你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时,你可以使用 v-on 的 .native 修饰符

<div id="app">        <btn @click.native='alert(1)'>点击</btn></div>

2、从内部传出来

    <div id="app">        <btn @click='alert(1)'>点击</btn>    </div>    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>    <script>        Vue.component('btn', {            template:`            <button @click='handleClick'>                <slot></slot>            </button>            `,            methods: {                handleClick(e){                    this.$emit('click','e')                }            },        })        new Vue({            el: '#app',             data() {                return {                }            }        });    </script>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持本站。

本文链接地址:https://www.jiuchutong.com/zhishi/310570.html 转载请保留说明!

上一篇:WordPress更换主题,你需要注意哪些事情(wordpress主题安装好后怎么设置)

下一篇:canvas实现图片标记(canvas实现图片编辑)

  • 小米手环7pro息屏设置怎么设置(小米手环7Pro消息看完还显示)

    小米手环7pro息屏设置怎么设置(小米手环7Pro消息看完还显示)

  • 红米note8pro可以调成90hz吗(红米Note8pro可以放sd卡吗)

    红米note8pro可以调成90hz吗(红米Note8pro可以放sd卡吗)

  • iphone防水等级(iphone13防水等级)

    iphone防水等级(iphone13防水等级)

  • 华为mate30如何刷机(华为mate30如何刷机EMIU11)

    华为mate30如何刷机(华为mate30如何刷机EMIU11)

  • 小米10超广角怎么开(小米超广角怎么打开)

    小米10超广角怎么开(小米超广角怎么打开)

  • 怎么隐藏qq性别(怎样隐藏qq性别)

    怎么隐藏qq性别(怎样隐藏qq性别)

  • 快手剪辑视频都是用什么软件(剪辑快手短视频)

    快手剪辑视频都是用什么软件(剪辑快手短视频)

  • i9 9900k配什么显卡(i9-9900k配什么主板)

    i9 9900k配什么显卡(i9-9900k配什么主板)

  • 微博缓存视频在哪里可以找到(微博缓存视频在哪保存到本地)

    微博缓存视频在哪里可以找到(微博缓存视频在哪保存到本地)

  • 怎么切换qq账号(苹果怎么切换qq账号)

    怎么切换qq账号(苹果怎么切换qq账号)

  • qq附近人打招呼没人回应是不是收不到(qq附近人打招呼显示今日很受欢迎发不出去怎么办)

    qq附近人打招呼没人回应是不是收不到(qq附近人打招呼显示今日很受欢迎发不出去怎么办)

  • 2016060是什么型号(2016050是什么型号)

    2016060是什么型号(2016050是什么型号)

  • char型变量存放的是什么(char型变量存放在ROM还是RAM)

    char型变量存放的是什么(char型变量存放在ROM还是RAM)

  • 手机号加入黑名单对方听到是什么(手机号加入黑名单打电话会怎样)

    手机号加入黑名单对方听到是什么(手机号加入黑名单打电话会怎样)

  • 苹果11怎么百分比显示(苹果怎么百分百退款成功的理由)

    苹果11怎么百分比显示(苹果怎么百分百退款成功的理由)

  • 钢化膜贴歪了怎么办(钢化膜贴歪了怎么修复)

    钢化膜贴歪了怎么办(钢化膜贴歪了怎么修复)

  • 华为crr ul00又叫什么(华为crr-ul20是什么型号)

    华为crr ul00又叫什么(华为crr-ul20是什么型号)

  • 华为v30pro和mate30区别(华为v30pro和荣耀30pro区别)

    华为v30pro和mate30区别(华为v30pro和荣耀30pro区别)

  • vivo视频美颜怎么弄(vivo视频美颜怎么弄微信)

    vivo视频美颜怎么弄(vivo视频美颜怎么弄微信)

  • 荣耀20青春版怎么调节屏幕亮度(荣耀20青春版怎么刷机)

    荣耀20青春版怎么调节屏幕亮度(荣耀20青春版怎么刷机)

  • 拼多多0.01抽奖怎么取消(拼多多0.01抽奖老是抽不到100元)

    拼多多0.01抽奖怎么取消(拼多多0.01抽奖老是抽不到100元)

  • 金立gn9011是什么型号(金立gn9011是什么手机)

    金立gn9011是什么型号(金立gn9011是什么手机)

  • oppor17手机长度多少厘米(oppo 手机长度)

    oppor17手机长度多少厘米(oppo 手机长度)

  • 135编辑器怎么保存(135编辑器怎么保存个人模板)

    135编辑器怎么保存(135编辑器怎么保存个人模板)

  • 淘宝账户设置在哪里(淘宝账号权限设置)

    淘宝账户设置在哪里(淘宝账号权限设置)

  • 一行代码“黑”掉任意网站(一行简单的代码)

    一行代码“黑”掉任意网站(一行简单的代码)

  • 分割网络损失函数总结!交叉熵,Focal loss,Dice,iou,TverskyLoss!(网络分割算法)

    分割网络损失函数总结!交叉熵,Focal loss,Dice,iou,TverskyLoss!(网络分割算法)

  • 个人所得税退的多好还是少好
  • 电脑填制记账凭证实训心得
  • 报验户与正常户的区别
  • 工资可以先计提不发吗
  • 佣金收入交什么税费
  • 借方应付账款 贷方银行存款
  • 纸质发票如何查看电子发票
  • 项目部分回款是什么意思
  • 行政相对人和行政管理相对人的区别
  • 境内所得境外发放工资
  • 契税可以银行转让吗
  • 国税能代开什么费用的发票?
  • 红字发票怎么做帐
  • 技术服务发票的单位是什么
  • 财税〔2017〕39号
  • 营增改后,建筑施工企业有哪些改变?
  • 设定提存计划怎么填
  • 企业核算方法
  • 企业所得税减免政策
  • 2021最新车船税
  • 个体工商户季度申报报税流程
  • 免税进口种子要符合哪些条件?
  • txp1atform.exe
  • 事业单位收入需要缴纳所得税吗
  • 工商年报中生育保险本期实际缴费金额
  • 企业微信api错误码
  • u盘无法格式化为NTFS
  • 电脑bios找不到vt
  • windows11怎么设置锁屏密码
  • 如何使用php
  • mac osx10.11
  • 绿萝怎么扦插?
  • 企业年金在缴费阶段涉及的税种包括
  • 专项应付款转资本公积需要什么附件
  • 小程序uniapp怎么用
  • golang 和 java
  • 卖出回购证券的钱怎么算
  • 办理车辆购置税流程
  • 公司购买理财产品
  • 进项税额年末账务处理
  • 帝国cms视频教程
  • 织梦采集器图片本地化
  • 开自家车出差怎样报销
  • 药店主营业务成本怎么算出来的
  • 待报解预算收入是什么
  • 一般纳税人开普票和专票有什么区别
  • 专用发票跨月退税怎么办
  • 售后服务期多久
  • 购买材料计入
  • 购买无形资产的手续费计入
  • 设备租赁公司如何赚钱最快
  • 废品损失是什么要素
  • 已付款收货未收货怎么办
  • 费用发票的种类
  • sqlmap 提权
  • windows xp sp4 下载 windows xp sp4补丁包(非官方)
  • redhat 7.0
  • centos 6.5安装教程
  • centos7.6和7.7
  • win8wifi设置在哪
  • javascript自定义属性
  • 阿里云ecs keepalived
  • Android OnTouchEvent, onClick, onLongClick调用机制
  • Android 近百个项目的源代码
  • awk fnr nr
  • unity-3d
  • nodejs readdir
  • 批处理中copy怎么用
  • js输出100以内能被5整除的数
  • jquery的动画效果
  • Jquery针对tr td的一些实用操作方法(必看篇)
  • node.js和ajax的顺序
  • python中循环
  • javascript的主要内容
  • js滚动条滚动触发事件
  • 深圳电子税务局税种启用在哪里
  • 企业所得税问题的研究论文
  • 教师职称申报申请
  • 特价机票包含燃油费和机场建设费吗
  • 购买税控盘的发票需要交印花税吗?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设