vue——给组件绑定原生事件：.native

最新推荐文章于 2023-11-30 16:37:04 发布

stack君

最新推荐文章于 2023-11-30 16:37:04 发布

阅读量1.3k

点赞数

分类专栏： VUE学习笔记

本文链接：https://blog.youkuaiyun.com/weixin_54362381/article/details/119885920

版权

VUE学习笔记专栏收录该内容

27 篇文章

订阅专栏

本文介绍了在 Vue.js 中如何给组件绑定原生事件，以及使用 `.native` 修饰符的区别。通常，组件上的事件是自定义事件，需要通过 `$emit` 触发，但这种方式较为繁琐。通过在组件标签上添加 `.native` 修饰符，可以直接绑定原生事件，简化子组件与父组件间的交互。示例中展示了如何在不使用 `$emit` 的情况下，通过 `.native` 绑定点击事件来触发父组件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给组件绑定原生事件：.native

1、在组件标签上绑定的事件是自定义事件，在组件模板里绑定的事件才是原生的事件。（自定义事件可以通过在子组件中通过this.$emit去触发，但是这样太麻烦）

<div id="root">
       <!-- 监听自定义事件 -->
       <child @click="handleClick"></child>
    </div>
    <script>
    Vue.component('child',{
       //元素上绑定的是监听原生事件
       template:'<div @click="handlechildClick">child</div>',
       methods:{
       	handlechildClick:function(){
       		// 子组件想触发父组件的监听事件,
       		// 方法一、通过$this.$emit,缺点:步骤复杂
       		this.$emit('click')
       	}
       }
    })
    var vm = new Vue({
        el:'#root',
        methods:{
        	handleClick:function(){
        	    alert('已触发父组件监听')//子组件通过$emit绑定后,可以出发父组件的监听
        	}
        }
    })
 </script>

2、给组件标签上的事件添加‘.native’修饰符，就可以使事件变为原生点击事件而不再是自定义事件。

 <div id="root">
       <!-- 方法二:后面加.native,可以给组件绑定原生事件 -->
       <child @click.native="handleClick"></child>
 </div>