位置: 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实现图片编辑)

  • 运输费用怎么计算出来
  • 增值税纳税期限1日是什么意思
  • 收到商业汇票计入科目
  • 税务机关如何正确行使代位权
  • 一般纳税人计提增值税账务处理
  • 专票未认证是什么意思
  • 出口免税进项税额转出会计分录
  • 小规模纳税人购车是怎么抵税的
  • 增值税税收返还政策
  • 什么情况下是应收账款
  • 注销时公司账上没有钱付股东投资款
  • 转让土地使用权 简易征收
  • 物业管理提供的服务变化
  • 合作社开具的免税普票计算抵扣
  • 公账转私账备注借款
  • 防伪税控开具发票明细表
  • 什么叫管理口径报表
  • 已知不含税金额和增值税如何计算税率
  • 劳务报酬所得缴多少税
  • 纳税人购买税控设备抵扣问题
  • unsupportedfirsthd解决办法
  • 公务车加油入什么科目
  • 非公开发行股票是利好还是利空
  • 营业外支出所得税前可以扣除吗
  • 经营租入固定资产的租赁费计入
  • 错账缴回的银行会计分录
  • 利息支出属于生产成本吗
  • 房地产开发公式
  • 库存商品损失怎么做账
  • php如何防止后门
  • php swoole框架
  • 工程完工后的质量抽检不合格怎么办
  • 新星计划会限流吗
  • controller控制器怎么调
  • 因质量问题对方直接扣款怎么处理
  • 如何理解符合立案标准的,行政机关应当及时立案
  • 上一年的进项税转出还用交企业所得税吗
  • 管理费用属于产品成本么
  • sqlserver强制转换为字符
  • sqlserver连接到服务器登录名
  • 劳动报酬收入包含什么
  • 收据大写后面的空格怎么填
  • 生产成本明细科目有哪些内容
  • 企业培训费怎么入账
  • 发生销售折让的双方应做的会计分录是
  • 收到投资款证明怎么做账
  • 冲回上月暂估入账的商品会计分录
  • 公司举行活动发言稿范文
  • 建设期利息有哪些
  • 公司账户的钱怎么合理的转出来
  • 机票行程单上没有金额怎么报销
  • 单位统一订员工餐
  • 个体工商户可以变更法人吗
  • mysql5.7闪退
  • mac安装mysql没看见初期密码
  • 在mac设备上用到什么
  • xp系统进程
  • 进程关不掉怎么解决
  • Win10中文输入法不能用
  • linux 多网卡配置
  • win10的qq
  • win7免费升win8
  • linux怎样过滤一个关键字
  • win7蓝屏代码0x0000007e
  • 每日十条简短新闻
  • css选择器类选择器
  • jsonp实现动态加载文件
  • AndroidAnnotations 自定义控件 ant编译 找不到类
  • python自动截图
  • linux重定位命令
  • unity3d动画系统
  • bootstrap按钮图标
  • shell脚本特性
  • 如何实现高质量发展
  • 理解的英文
  • 小规模纳税人开1%普票怎么报税
  • 税务局的前身是什么
  • 广东国税局发票查询平台
  • 国税局的标志
  • 成都市青羊区国有资产监督管理办公室
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设