精华内容
下载资源
问答
  • 主要给大家介绍了关于Vue事件修饰符native、self的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • vue事件修饰符native 的作用

    千次阅读 2019-07-29 16:27:47
    转载: https://blog.csdn.net/qq_29468573/article/details/80771625 通俗点讲:就是在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加’. native事件是无法触 发的。 ...

    转载: https://blog.csdn.net/qq_29468573/article/details/80771625

    通俗点讲:就是在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加’. native’事件是无法触 发的。

    可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签,并且该修饰符对普通HTML标签是没有任何作用的。

    展开全文
  • (阻止事件冒泡) eg:触发子元素事件时不会冒泡影响到外层父元素事件 .prevent调用event.preventDefault()。(阻止默认事件) eg:<input type="submit" v-on:click.stop.prevent="onSubmit"/>提交不重载页面 @...

    .stop调用event.stoppropagation()。(阻止事件冒泡)   eg:触发子元素事件时不会冒泡影响到外层父元素事件

    .prevent调用event.preventDefault()。(阻止默认事件)    eg:<input type="submit"  v-on:click.stop.prevent="onSubmit"/> 提交不重载页面

    @keyup监听键盘弹起事件 

    @keydown监听键盘按下事件

    @keyup.enter(键码)监听回车键弹起事件    eg:<input v-on:keyup.left.right.enter.90="keyup"/> 可以设定多个按键的值

    .once只触发一次回调

    .native监听组件根元素的原生事件 

    1,给vue组件绑定事件时候,必须加上native ,不然不会生效(注意给普通标签加.native无效)

    2,在组件上v-on时,我们监听的是组件的自动触发的自定义事件

    3,等同于在自定义组件中:

       子组件内部处理click事件然后向外发送click事件:$emit("click".fn) //执行两次函数

    <div id="app">
        <a-cmp @change='handleClick'></a-cmp>
    </div>
    <script>
        const vm = new Vue({
                el: '#app',
                methods: {
                    handleClick() {
                        alert('click');
                    }
                },
                components: {
                    'a-cmp': {
                        template:`<div @click='handleClick'> child </div>`,
                        methods: {
                           handleClick() {
                              console.log('组件');
                              this.$emit('change');
                           }
                        }
                     }
                 }
         })
    </script>

    可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。

    vm.$listener 包含了父组件中(除了 .native 修饰器以外的)事件监听器。

    可以在内部组件可以通过 v-on="listener" 将外部组件绑定的事件和事件函数传入内部组件。

    然后我们可以在子组件this.$listeners可以取到eventName这个方法。
    子组件可以通过this.$emit('eventName', data) 执行父组件绑定的方法。常用于子组件向父组件通信。

    此外:vue中使用v-bind=“$attrs“和v-on=“$listeners“进行多层组件监听。

    @click 自定义函数传参

    事件调用时候需要传入原生事件event(通过$event)及其他参数时 

    注意仅仅传入原生事件event时,省略(),直接形参获取到event参数;但如果加了()不传实参,则形参为undefined 

    <button @click="btnClick($event,'123')">按钮</button>

    btnClick(event,value) { console.log(event,value) }

    展开全文
  • 本博客编辑总监博主:博客链接 编辑人本博主:博客链接 v-on事件 ...v-on事件修饰符 prevent <!-- 阻止跳转行为 --> <div id="box"> <div @click="alert1()"> <a href="/

    本博客编辑总监博主:博客链接
    编辑人本博主:博客链接


    v-on事件

    v-on指令用于绑定事件,例如:

    v-on指令简写:
    
    v-on:click="show" 可以简写为 @click="show"
    v-on:mouseover="show" 可以简写为 @mouseover="show"
    

    v-on事件修饰符

    prevent

    <!-- 阻止跳转行为 -->
    <div id="box">
    	<div @click="alert1()">
    		<a href="/#" @click.prevent="alert2()">a标签
    		  <div @click="alert3()">div标签</div>
    		</a>
    	</div>
    </div>
    

    执行效果如下:
    在这里插入图片描述
    点击 a标签 ,弹框,不跳转
    点击 div标签,弹框,不跳转
    也就是 在click事件绑定 prevent 修饰符阻止页面跳转。

    self

    <!-- 阻止事件冒泡点击行为,主观性 -->
    <div id="box">
    	<div @click="alert1()">
    		<a href="/#" @click.self="alert2()">a标签
    		  <div @click="alert3()">div标签</div>
    		</a>
    	</div>
    </div>
    

    执行效果如下:
    在这里插入图片描述
    点击 a标签 弹框,跳转
    点击 div标签,不弹框,跳转
    也就是 self 修饰符 只阻止事件冒泡的事件行为,不阻止自身的事件行为,具有主观性。

    native

    <!-- 阻止默认事件行为 -->
    <div id="box">
    	<div @click="alert1()">
    		<a href="/#" @click.native="alert2()">a标签
    		  <div @click="alert3()">div标签</div>
    		</a>
    	</div>
    </div>
    

    在这里插入图片描述
    点击 a标签,不弹框,跳转
    点击 div标签,不弹框,跳转
    也就是native修饰符阻止默认事件(点击)行为,既阻止自己事件行为,也阻止冒泡事件行为。


    v-on事件修饰符组合分析(敲黑板、画重难点)

    prevent.self

    <!-- 官网:阻止所有点击 -->
    <div id="box">
    	<div @click="alerttt()">
    		<a href="/#" @click.prevent.self="alertrrrr()">a标签
    		  <div @click="alertllll()">div标签</div>
    		</a>
    	</div>
    </div>
    

    在这里插入图片描述
    点击 a标签,弹框,不跳转
    点击 div标签,不弹框,不跳转
    意思是:click prevent self 结合时,自己事件行为(点击 a标签)时,会执行 click(单击) 和 prevent(阻止跳转) 行为,不触发 self(阻止事件,即弹框),也就是 self 没有起到阻止弹框的作用,于是效果是:弹框,不跳转; 而事件冒泡(点击div标签)时,会执行 click prevent 和 self 三个关键字,效果就是:不弹框,不跳转。

    self.prevent

    <!-- 官网:阻止元素自身的点击 -->
    <div id="box">
    	<div @click="alerttt()">
    		<a href="/#" @click.self.prevent="alertrrrr()">a标签
    		  <div @click="alertllll()">div标签</div>
    		</a>
    	</div>
    </div>
    

    在这里插入图片描述
    点击 a标签,弹框,不跳转
    点击 div 标签,不弹框,跳转
    也就是 click self prevent 三者结合时,自己事件行为(点击 a标签)时,执行 click 和 prevent 行为,而事件冒泡时,会执行 click 和 self 行为。

    native.prevent / prevent.native

    <!-- 阻止默认行为 -->
    <!-- native和prevent组合时,native执行了,prevent就不会执行,native优先级>prevent -->
    <!-- 点击自己不显示,跳转;事件冒泡不显示,跳转-->
    <div id="box">
    	<div @click="alerttt()">
    		<a href="/#" @click.native.prevent="alertrrrr()">a标签
    		  <div @click="alertllll()">div标签</div>
    		</a>
    	</div>
    </div>
    

    在这里插入图片描述
    点击 a标签,不弹框,跳转
    点击 div标签,不弹框,跳转
    当 click native prevent 三者结合时,效果与 click native 两个修饰符相同,没有执行 prevent 修饰符。


    总结分析

    当事件修饰符组合使用时,需要注意优先级情况:

    • prevent 在前时,修饰的是v-on 事件,不管是 自己事件行为还是冒泡事件行为,都会执行 prevent 行为,也就是阻止跳转。
    • prevent 在后时,修饰的是 v-on 被 self 修饰后的 事件,当执行 self 行为时,不执行 prevent 行为, 当不执行 self 行为时,执行 prevent 行为。
    • 只要有 self 修饰符时, 自己事件行为,就不会执行 self (阻止事件) 行为,也就是弹框,而冒泡会执行 self 行为,也就是不弹框。
    • native 与其他结合使用时,不管顺序如何,和单独的 native 行为,效果都相同,也就是 事件中只要有 native 修饰,别的修饰符有不起作用了。

    本篇博客为个人理解的总结,如有错误,请指正!

    展开全文
  • 事件修饰符native

    2020-09-25 11:26:27
    事件修饰符native 应用场景: 给按钮设置点击事件: <button @click="logout()">退出</button> <--! 事件操作成功 /--> ​ @click是vue事件绑定操作,具体是给普通的html标签使用的。 给...

    事件修饰符native

    应用场景

    1. 给按钮设置点击事件:

      <button @click="logout()">退出</button>     <--! 事件操作成功 /-->
      

    ​ @click是vue事件绑定操作,具体是给普通的html标签使用的。

    1. 给下拉组件项设置点击事件:

      <el-dropdown-item @click="logout()">退出</el-dropdown-item>   <--! 事件操作失败 /-->
      

    ​ el-dropdown-item本身是一个“组件”,组件是很多html标签的集合体,给这个集合体绑定事件,但是不知道具体给到哪个标签使用,因此事件绑定失败。

    解决方案

    • 给事件绑定设置一个名称为native的修饰符(事件修饰符),使得该事件作用到内部的html标签身上:
    <el-dropdown-item @click.native="logout()">退出</el-dropdown-item>   <--! 事件操作成功 /-->
    
    展开全文
  • vue 事件修饰符

    2020-07-15 17:17:36
    .stop 阻止冒泡事件 .prevent .passive prevent 拦截默认事件 比如mousedown mousemove不会选中文字,<a @click.prevent=<event> href="...">....native 现在在组件上使用v-on只会监听自定义..
  • 上述代码点击页面的Child不会有任何输出,因为绑定的是自定义事件。想要有输出,需要这样做: <body> <div id="app">... Vue.component('child', { template: '<div @click="com.
  • vue事件修饰符详解

    2020-07-06 16:24:13
    vue 事件修饰符 .stop 阻止事件冒泡 .prevent 阻止事件的默认行为 .once 只触发一次 .self 点击元素本身触发 .capture 向下捕获方式触发 .native 转化为原生事件 .passive 滚动事件延迟
  • vue事件修饰符

    2021-03-24 11:29:14
    Vue中通过事件修饰符阻止,vue给我们提供了丰富的事件修饰符 .prevent,阻止默认行为 .stop, 阻止事件冒泡 .capture 冒泡改为捕获 .self 只处理自己身上的事件,不理会冒泡或捕获 .once ...
  • Vue-事件修饰符

    2019-04-28 01:27:00
    官方解释: 在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的...事件修饰符说明: native: 表明这个是DOM原生的事件,若不加 native ,则Vue会认为该事件名是一个自定义事...
  • 在父组件中,如果想为子组件绑定一个点击事件,有可能这么写: <!... <... <head>...meta charset="UTF-8">...script src="vue.js"></script> </head> <body> <div id="app">
  • vue修饰符

    2019-10-05 15:59:46
    Vue提供了很多修饰符来方便开发者使用,这里主要...事件修饰符 .stop .prevent .capture .self .once .passive .native 按键修饰符 .enter|.tab|.delete|.esc|.space|.up|.down|.left|.right k...

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 262
精华内容 104
关键字:

vue事件修饰符native

vue 订阅