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

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

vue给组件动态绑定不同的事件

场景

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

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

实际操作代码如下：

<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>

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

赞 (0)

相关推荐

  • VUE v-for循环中每个item节点动态绑定不同函数的实例

    一. 业务场景: 一个title 处 可能有 一个或多个按钮, 按钮对应不同的响应事件 二. 思路 : 按钮个数 根据传入的数据length 来循环渲染, 每条数据对应的事件名称 通过动态绑定 三. 封装组件 1. 视图层面 2. 代码部分 2.1 结构部分 <!-- 多个button组件--> <titleAddBtn :addBtnList="addBtnList" @clkCallBk="listenCall"></titleAd

  • vue如何给自定义的组件绑定点击事件

    目录 给自定义的组件绑定点击事件 给自定义组件添加单击事件 给自定义的组件绑定点击事件 在做项目中我们往往会封装许多的组件,来减少代码的重复性,提高代码的可利用性,有时候也会给组件绑定事件,但是经常会失效. 先给cardinfo这个组件绑定一个点击事件      <cardinfo         :content="content"         :from="from"         :ProPortrait="ProPortrait&quo

  • 详解Vue 动态组件与全局事件绑定总结

    最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战项目中才能发现问题,才能发现我们没有掌握的知识点,然后发现问题解决问题,我们的能力才能得以提升,要不然就有点眼高手低了. 基于这个想法于是就开始自己去撸了一个旅游网站,旅游网站嘛避免不了城市的选择,所以在实现城市选择列表的时候碰到的一些问题,以及解决办法今天就记录下来做一个总结. 城市列表选择组件 首先说说我们要实现一个什么样的城市选择组

  • vue 实现特定条件下绑定事件

    今天写了个小功能,看起来挺简单,写的过程中发现了些坑. 1.div没有disabled的属性,所以得写成button 2.disabled在data时,默认是true,使得初始化时,默认置灰按钮,无法点击 <div class='form-item'> <div class="checkWrap clearfix" @click='checkMark()'> <div class="checkBox" v-show="chec

  • 浅谈Vue.js 组件中的v-on绑定自定义事件理解

    浅谈Vue.js 组件中的v-on绑定自定义事件理解

    每个 Vue 实例都实现了事件接口(Events interface),即: 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 Vue的事件系统分离自浏览器的EventTarget API.尽管它们的运行类似,但是$on 和 $emit 不是addEventListener 和 dispatchEvent 的别名. 另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件. 下面是一个文档上面的例子: 2017年4月11日更新 <d

  • vue如何给组件动态绑定不同的事件

    目录 vue给组件动态绑定不同的事件 场景 vue组件绑定事件无效 下面提供两者方法,可以任选其一 vue给组件动态绑定不同的事件 场景 根据用户配置的事件动态绑定.也就是用户可以动态选择配置 click ,change,blur等事件 需要根据用户的配置的事件动态绑定 @click.@change或@bulr 实际操作代码如下: <template>   <div>     <el-input v-for="(item,index) in list"  

  • Vue如何给组件添加点击事件 @click.native

    目录 给组件添加点击事件 @click.native 问题 结论 vue中@click.native使用 @click.native是给组件绑定原生事件 给组件添加点击事件 @click.native 问题 毕设项目中有个产品展示列表,当初用组件写的,今天想要点击获取当前选中的产品的数据,刚开始直接使用@click写的,但是点击并没有生效. 我尝试在组件中添加点击事件,点击图片,控制台输出1. 结果是可以实现的. 结论 给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自It

  • Vue中父子组件通信与事件触发的深入讲解

    Vue中父子组件通信与事件触发的深入讲解

    目录 一.组件 子组件 父组件 二.父子组件通信 父组件给子组件通信 子组件向父组件通信 三.父子组件事件触发 父组件调用子组件中的事件方法 子组件调用父组件中的事件方法 四.总结 一.组件 子组件 <template> <div style="border:1px solid black;width:400px; height: 130px;"> <h3>我是子组件</h3> <button>子组件将值传递给父组件</

  • 使用vue.js在页面内组件监听scroll事件的方法

    思路:scroll在哪儿个组件内,就在获取那个dom元素.网上好多思路是 window.addEventListener("scroll", function(){ console.log('scrolling'); }); 这是监听不到的!如果你整个网页可以滑动,或许还可以试试! 对于像我这样,只在页面的内的一个div内要监听的. 实现代码如下: 第一步:滑动的组件外层的div加 ref="viewBox" 为了通过$refs获取dom元素 <!--设备列表

  • vue.js父子组件通信动态绑定的实例

    如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id='app'> <!--这里的作用是将父组件渲染到页面上--> <father></father> </d

  • Vue.js组件通信之自定义事件详解

    Vue.js组件通信之自定义事件详解

    组件通信 从父组件向子组件通信,通过props传递数据就可以了,但Vue组件通信的场景不止有这一种,归纳起来,组件之间的通信可以用下图来表示: 自定义事件 当子组件需要向父组件传递数据时,就要用到自定义事件.子组件用**$ emit()来触发事件**,父组件用**$ on()**来监听子组件的事件. 父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的事件. <!DOCTYPE html> <html lang="en"> <head>

  • 解决Vue.js父组件$on无法监听子组件$emit触发事件的问题

    最近学习vuejs看例子中用$on无法监听子组件$emit触发事件: 使用版本 vue.js 2.2.5 参考文献 1.vuejs API 2.解决实例 问题分析 1.之前写的自定义组件事件触发为this.$emit("myclick",this.todo.text);,这样this指的是todo-item的每一项,而最后vm.$on监听的是app组件,也就出说监听的是父节点,而触发的是子节点,故监听不到这个事件的. 解决思路 1.将触发事件放在父节点上触发,就可以监听到触发的事件了,

  • vue vantUI tab切换时 list组件不触发load事件的问题及解决方法

    最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会自动加载一次,可以:immediate-check="false" 这样设置一下,页面加载完成后就不会自动加载一次了 ) 看上去一切都很美好:但是tab进行切换的时候,list组件的load事件不会再次被触发!!!就是list组件做上拉加载只有在第一个tab会触发,切换后触底不会再次触发

  • vue内置组件keep-alive事件动态缓存实例

    在App.vue文件中配置 <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> 在路由中配置 { path: '/backstage', component: res

随机推荐