Vue 事件中的 .native你搞明白了吗

native是什么?

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

官网的解释:

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

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


 
 
      
      Document
  
  
      

此时点击页面中的按钮无任何反应。




    
    Document


    
按钮

总结: .native - 主要是给自定义的组件添加原生事件,可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签,并且该修饰符对普通HTML标签是没有任何作用的。

补充:vue中'. native'修饰符的使用

        官网的解释:

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

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

Vue 事件中的 .native你搞明白了吗_第1张图片

            此时点击页面中的按钮无任何反应。               

添加修饰符:                

Vue 事件中的 .native你搞明白了吗_第2张图片

                此时点击就会弹窗:                

Vue 事件中的 .native你搞明白了吗_第3张图片

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

到此这篇关于vue 事件中的 .native你搞清楚了吗的文章就介绍到这了,更多相关vue 事件.native内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(Vue 事件中的 .native你搞明白了吗)