vue.js实战——.native修饰符

最新推荐文章于 2024-07-24 11:09:48 发布

weixin_30399871

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量143

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/em2464/p/10419439.html

版权

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

除了用v-on在组件上监听自定义事件外，也可以监听DOM事件，这时可以用.native修饰符表示监听的是一个原生事件，监听的是该组件的根元素，示例如下：

        <my-component v-on:click="handleClick"></my-component>　　//不会触发

　　　　　　<my-component v-on:click.native="handleClick"></my-component>　　//触发handleClick

<body>
    <div id="app">
        <my-component @click="outClick"></my-component>  　　　　　　<!-- 点击无弹框，事件绑定失败 -->

        <my-component @click.native="outClick"></my-component>　   <!--点击有弹框，事件绑定成功--->

    </div>
    <script>
        Vue.component('my-component',{
            template:'<button>点击事件</button>'
        })
       var app=new Vue({
           el:'#app',
           methods:{
               outClick(){
                   alert('this is outer');
               }
           }
       })
    </script>
</body>

总结：

　　在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加“”.native“”事件是无法触发的。

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

转载于:https://www.cnblogs.com/em2464/p/10419439.html

weixin_30399871

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js实战——.native修饰符

https://blog.csdn.net/qq_29468573/article/details/80771625除了用v-on在组件上监听自定义事件外，也可以监听DOM事件，这时可以用.native修饰符表示监听的是一个原生事件，监听的是该组件的根元素，示例如下： <my-component v-on:click="handleClick">&l...
复制链接

扫一扫