精华内容
下载资源
问答
  • 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>
                                 
    
    展开全文
  • 这篇文章给大家介绍Vue.js中.native修饰符,感兴趣的朋友一起看看吧。 .native修饰符 官方对.native修饰符的解释为:  有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。...
  • <...<... 提问: ... 答:不会!...原因:自定义子内部并没有$emit这个click事件...对于内置dom元素(例如div, button,p,…) vue会自动绑定系统事件(click, mouseenter,…),而对于普通的自定义的组件要自己处理。 ...

    1. 修饰符.native

    <my-com @click="hClick"></my-com>
    

    提问:

    对于自定义的组件,如果添加@click,在我们点击这个组件,这个回调会执行吗?

    答:不会!

    原因:自定义子内部并没有$emit这个click事件。

    • 对于内置dom元素(例如div, button,p,…) vue会自动绑定系统事件(click, mouseenter,…),而对于普通的自定义的组件要自己处理。

    作用:

    • .native事件修饰符是用来是在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签看待。

    为了解决上边的问题,可以在监听原生事件的同时,设置一个.native修饰符,这样就可以正常监听了

    <el-dropdown-item divided @click.native="logout">
        <span style="display:block;">退出登录</span>
    </el-dropdown-item>
    

    小结

    2. 修饰符.sync(面试重点)

    .sync作用

    • 实现父子组件数据之间的双向绑定,与v-model类似。
    • 类别在于:一个组件上只能有一个v-model,.sync修饰符可以有多个。

    原理

    • v-model的原理
    <com1 v-model="num"></com1>
    等价于
    <com1 :value="num" @input="(val)=>this.num=val"></com1>
    
    • .sync修饰符的原理
    // 正常父传子: 
    <com1 :a="num" :b="num2"></com1>
    
    // 加上sync之后父传子: 
    <com1 :a.sync="num" .b.sync="num2"></com1> 
    
    // 它等价于
    <com1 
      :a="num" @update:a="val=>num=val"
      :b="num2" @update:b="val=>num2=val"></com1> 
    
    // 相当于多了一个事件监听,事件名是update:a,回调函数中,会把接收到的值赋值给属性绑定的数据项中。
    

    示例
    在这里插入图片描述
    小结

    .sync与v-model区别是

    • 相同点:都是语法糖,都可以实现父子组件中的数据的双向通信

    • 区别点:

      • 格式不同。v-model="num", :num.sync="num"
      • v-model: @input + value
      • :num.sync: @update:num
      • v-model只能用一次;.sync可以有多个。
    展开全文
  • 主要给大家介绍了关于Vue事件修饰符native、self的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • vue之.native修饰符

    2019-01-03 18:18:00
    .native修饰符就是用来注册元素的原生事件而不是组件自定义事件的 比如:自定义Button.vue组件 <template> <button type="button" @click="clickHandler"><slot /></button> </...

    .native 修饰符就是用来注册元素的原生事件而不是组件自定义事件的

     

    比如:自定义 Button.vue 组件

    <template>
      <button type="button" @click="clickHandler"><slot /></button>
    </template>
    export default {
      name: 'button',
      methods: {
        clickHandler () {
          this.$emit('vclick') // 触发 `vclick` 事件
        }
      }
    }

    引用 Button.vue 组件

    <vButton @click="clickHandler" @vclick="vClickHandler">按钮</vButton>
    import vButton from '@/components/Button'
    export default {
      components: { vButton },
      methods: {
        clickHandler () {
          alert('onclick') // 此处不会执行 因为组件中未定义 `click` 事件
        },
        vClickHandler () {
          alert('onvclick') // 触发 `vclick` 自定义事件
        }
      }
    }

    如果将上面模版改成如下方式,那么两个事件都会执行。

    <vButton @click.native="clickHandler" @vclick="vClickHandler">按钮</vButton>

     

    所以, .native 修饰符就是用来注册元素的原生事件而不是组件自定义事件的。

     

     

     

     

     

    转载于:https://www.cnblogs.com/catherLee/p/10216125.html

    展开全文
  • 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中的.native修饰符

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

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

    2018-04-24 13:45:00
    .native修饰符 官方对.native修饰符的解释为:  有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用v-on的修饰符 .native。例如: <my-component v-on:click.native="doTheThing"></my...
  • Vue .native修饰符 .native - 监听组件根元素的原生事件。 即直接写到组件标签里 例如: 这样才能触发click事件 父子组件挂载顺序 父 beforeCreate 父 created 父 beforeMount 子 beforeCreate 子 created 子 ...
  • vue事件修饰符native 的作用

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

    2019-10-05 15:59:46
    Vue提供了很多修饰符来方便开发者使用,这里主要补充一个修饰符的大纲用作笔记。 目录 v-on修饰符 事件修饰符 .stop .prevent .capture .self .once .passive .native 按键修饰符 .enter|.tab...
  • vue modifier 修饰符

    2019-08-30 14:38:01
    vue modifier 修饰符.native 将原生事件绑定在组件上用.native <base-input @:focus.native="onFocus"></base-input> .sync 真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件 和 .sync...
  • vm.$listener 包含了父组件中(除了 .native 修饰器以外的)事件监听器。 可以在内部组件可以通过 v-on="listener" 将外部组件绑定的事件和事件函数传入内部组件。 然后我们可以在子组件的this.$listeners可以...
  • vue的.native:将原生事件绑定到组件的理解 阅读官网时,看到这里很懵,查了一些资料才理解.native的用法: ...所以我们要加上.native修饰符: <div> <my-component @click.native="outClick
  • 除了用v-on在组件上监听自定义事件外,也可以监听DOM事件,这时可以用.native修饰符表示监听的是一个原生事件,监听的是该组件的根元素,示例如下: <my-component v-on:click="handleClick">&l...
  • 本博客编辑总监博主:博客链接 编辑人本博主:博客链接 v-on事件 ...v-on事件修饰符 prevent <!-- 阻止跳转行为 --> <div id="box"> <div @click="alert1()"> <a href="/
  • 本笔记主要基于官方文档《迁移策略—— 移除v-on.native修饰符》汇总而来。如有理解出入,请以官方文档为主。 知识储备 将原生事件绑定到组件 emitsOption 概述 在 Vue 3.x v-on 的 .native 修饰符将被移除。 Vue...
  • .native修饰符 官方对.native修饰符的解释为: 有时候,你可能想在某个组件的根元素(原生事件者)上监听一个原生事件。可以使用 v-on 的修饰符 .native 。例如:  如果是普通的HTML标签(非原生事件者)监听一...
  • vm.$listener 包含了父组件中(除了 .native 修饰器以外的)事件监听器。 当内部组件不具备外部绑定的一些 DOM 事件,而外部组件具备相应的 DOM 事件时,在内部组件可以通过 v-on="listener" 将外部组件绑定的事件和...

空空如也

空空如也

1 2 3 4 5 ... 15
收藏数 284
精华内容 113
关键字:

vuenative修饰符

vue 订阅