精华内容
下载资源
问答
  • vue .native修饰符

    2021-03-24 18:22:03
    比如 router-link 路由跳转,默认标签为a,但是他的click 事件却是无效的,这时候就可通过native修饰符来使click事件生效例如: <router-link class="list" tag="li" to="aboutUs" @click.native="getScroll">...

    首先 .native就是给组件绑定原生事件采用的方法
    在vue 中有些组件加不上click事件
    比如 router-link 路由跳转,默认标签为a,但是他的click 事件却是无效的,这时候就可通过native修饰符来使click事件生效例如:

    
    <router-link class="list" tag="li" to="aboutUs" @click.native="getScroll">关于我们</router-link>
                                 
    
    展开全文
  • native修饰符 一般来说,vue本身提供了v-on:eventName这个语法来提供vue的时事件绑定,通常使用@eventName这个语法糖代替上述语法。 使用过程没有考虑@eventName作用标签的类型,因为一般将该语法用在html原生标签...

    native修饰符

    一般来说,vue本身提供了v-on:eventName这个语法来提供vue的时事件绑定,通常使用@eventName这个语法糖代替上述语法。

    使用过程中没有考虑@eventName作用标签的类型,因为一般将该语法用在html原生标签,在组件标签上使用的时候,出现了@click="handler"无法触发handler事件。

    以下为事故现场:

    <my-component @click="handler"><my-component/>

    使用该组件的vue实例
    注:handler( )为ES6语法,等同于handler:function( )

        methods:{
            handler(){
                console.log('click me');
            }
        }

    经过面向搜索编程(百度)
    发现默认@eventName使用在组件上是表示绑定了组件自定义eventName
    要绑定原生DOM事件,需要使用.native来修饰@eventName,即 @eventName.native 语法

    那么自定义事件又是怎么一肥事呢?

    一般来说,自定义事件用于Vue自定义组件,用于内部DOM元素事件响应时,开放给组件外部的API。

    specially,他需要组件内部使用$emit('defineEventName',value)这个方法来触发,这也表明了一开始我的错误想法,以为是触发组件内部的原生DOM的click方法,这里指明了使用@evnetName作用在组件上,不会触发原生DOM事件,即一开始的无反应。

    这里完成了一个@click="handler",而不是用native修饰符的例子,基于Vue自定义事件

    my-component组件内部实现

        <template>
            <button @click="in">click me</button>
        </template>
        methods:{
            in(){
                this.$emit('click')
            }
        }

    这个例子在点击按钮click me之后能够通过$emit('click')触发组件自定义的click事件以调用使用该组件上的Vue实例上的handler方法,打印出click me。

    在组件上想要触发@click事件,组件内部需要有一个可以触发原生click事件的元素,并且这个原生click事件绑定一个用于提交emit('click')到组件上的@click函数

    转载于:https://www.cnblogs.com/sefaultment/p/9360646.html

    展开全文
  • 这篇文章给大家介绍Vue.js.native修饰符,感兴趣的朋友一起看看吧。 .native修饰符 官方对.native修饰符的解释为:  有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。...
  • vue中的.native修饰符

    2021-03-05 14:42:02
    )上绑定事件,直接使用 @click=’‘function’ 是不生效的,我们可以添加.native修饰符 @click.native=’‘function’’. native是什么? .native - 监听组件根元素的原生事件。 主要是给自定义的组件添加原生事件...

    使用场景:
    如果你想在某个组件的根元素(比如<Aomp @click=’‘sbfun()’>)上绑定事件,直接使用 @click=’‘function’ 是不生效的,我们可以添加.native修饰符 @click.native=’‘function’’.

    native是什么?
    .native - 监听组件根元素的原生事件。
    主要是给自定义的组件添加原生事件。

    官网的解释:
    你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。

    展开全文
  • Vue.js.native修饰符

    2018-04-24 13:45:00
    .native修饰符 官方对.native修饰符的解释为:  有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用v-on的修饰符 .native。例如: <my-component v-on:click.native="doTheThing"></my...

    .native修饰符

    官方对.native修饰符的解释为:

      有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。例如:

    <my-component v-on:click.native="doTheThing"></my-component>

     


     

     

    简单点理解就是:

    • 给普通的HTML标签监听一个事件,之后添加 .native 修饰符是不会起作用的。例如:

    HTML代码 

    <div id="app">
      <a href="#" v-on:click.native="clickFun">click me</a>
    </div>

     JavaScript代码 

    new Vue({
      el: '#app',
      methods: {
        clickFun: function(){
          console.log("message: success")
        }
      }
    })

    结果

    • 给某个组件的根元素上监听一个事件,之后添加 .native 修饰符就会起作用了。例如:

    HTML代码

    <div id="app">
      <my-component v-on:click.native="clickFun"></my-component>
    </div>

    JavaScript代码 

    Vue.component('my-component', {
      template: `<a href='#'>click me</a>`
    })
    new Vue({
      el: '#app',
      methods: {
        clickFun: function(){
          console.log("message: success")
        }
      }
    })

    结果

     

    转载于:https://www.cnblogs.com/duniang/p/8929656.html

    展开全文
  • 关于vue的.native修饰符

    2019-01-17 17:15:20
    问题起源:在使用...在度娘的帮助下,总算是找到了解决办法,即:加上.native修饰符 &lt;file-upload label="添加" @click.native="setId(item.id)" @fileUploaded="fileUpload...
  • vue中事件修饰符详解

    2020-07-06 16:24:13
    vue 事件修饰符 .stop 阻止事件冒泡 .prevent 阻止事件的默认行为 .once 只触发一次 .self 点击元素本身触发 .capture 向下捕获方式触发 .native 转化为原生事件 .passive 滚动事件延迟
  • 在父组件,如果想为子组件绑定一个点击事件,有可能这么写: <!... <... <head>...meta charset="UTF-8">...script src="vue.js"></script> </head> <body> <div id="app">
  • vm.$listener 包含了父组件(除了 .native 修饰器以外的)事件监听器。 当内部组件不具备外部绑定的一些 DOM 事件,而外部组件具备相应的 DOM 事件时,在内部组件可以通过 v-on="listener" 将外部组件绑定的事件和...
  • vue中'. native'修饰符的使用

    万次阅读 多人点赞 2018-06-22 11:47:27
    可以使用 v-on 的修饰符 .native 。 通俗点讲:就是在父组件给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加'. native'事件是无法触 发的。 此时点击页面的按钮无任何反应。 ...
  • vue的事件修饰符

    2021-03-24 11:29:14
    Vue中通过事件修饰符阻止,vue给我们提供了丰富的事件修饰符 .prevent,阻止默认行为 .stop, 阻止事件冒泡 .capture 冒泡改为捕获 .self 只处理自己身上的事件,不理会冒泡或捕获 .once ...
  • <components @click="goHandle"></components> 发现默认@click使用在组件上是表示绑定了组件自定义click 要绑定原生DOM事件,需要使用.native修饰@click​​​​​​​,即@click.native语法
  • vuenative、stop、self修饰符

    千次阅读 2019-07-19 09:53:23
    vue中给组件绑定事件的时候必须加上native修饰,监听根元素的原生事件用native修饰 子组件内部向外部发送事件使用$emit stop <a v-on:click.stop='test'></a> // 阻止事件冒泡 prevent <a v-...
  • Vue-事件修饰符

    2019-04-28 01:27:00
    官方解释: 在事件处理程序调用event.preventDefault()或event.stopPropagation()是非常常见的...事件修饰符说明: native: 表明这个是DOM原生的事件,若不加 native ,则Vue会认为该事件名是一个自定义事...
  • vue事件修饰符native 的作用

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

    2020-07-15 17:17:36
    的href也不会触发。 .once 只触发一次,触发完移除事件 .self 只在目标Dom是绑定了对应动作的Dom才触发 .capture 元素默认是事件冒泡,加了这个变成事件捕获 .native 现在在组件上使用v-on只会监听自定义...
  • 问题:element ui input组件@keyup事件添加没反应 // 例如: 在实际开发 会存在事件...// 添加 .native 修饰符 可以很好的解决问题 <el-input placeholder="请输入内容" v-model="formDatas.title" @keyup.enter.n
  • Vue修饰符前言表单修饰符.lazy.trim.number表单修饰符.stop.prevent.selt.once.capture.passive.native鼠标修饰符键值修饰符.keyCodev-bind 前言 测试:没有空格校验? 在实际工作,有一些问题需要注意的问题,比如...
  • vue怎么写键盘事件 vue允许将按键值作为修饰符来使用,如监听回车事件,有两种写法,如下代码: <input type="text" @keyup.13="console.log($event)">...解决办法:加上.native原生事件修饰符即可。
  • vue中的.native

    2020-07-06 16:48:49
    vue中的.native修饰符 如果你想在某个组件的根元素上绑定事件,直接使用 @click=’‘function’ 是不生效的,我们可以添加.native修饰符 @click.native=’‘function’’
  • vue中的事件修饰符

    2021-01-22 11:35:14
    vue中的事件修饰符. stop:阻止冒泡. prevent:阻止默认事件. capture:捕获冒泡. self:将事件绑定到自身. once:设置事件只能触发一次. passive:默认事件性能优化. native:将子组件变成普通的HTML标签 . stop:...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 124
精华内容 49
关键字:

vue中native修饰符

vue 订阅