Vue 给组件绑定原生事件

最新推荐文章于 2025-05-30 08:07:58 发布

原创最新推荐文章于 2025-05-30 08:07:58 发布 · 736 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

35 篇文章

订阅专栏

本文详细解析了在Vue.js中如何正确地绑定组件事件。包括原生事件与自定义事件的区别，以及如何在子组件中触发事件并被父组件监听。同时介绍了父组件直接绑定子组件原生事件的方法。

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

给一个组件绑定原生事件，如下方法是错误的！

	<div id="root">
		<child @click="handleClick"></child>
	</div>
	<script>
		Vue.component("child",{
			template: "<div>child</div>"
		})
		var vm = new Vue({
			el: "#root",
			methods: {
				handleClick: function(){
					alert("hello");
				}
			}
		})
	</script>

得在组件中进行绑定，下面就是正确的绑定方法，是原生事件。

	<div id="root">
		<child></child>
	</div>
	<script>
		Vue.component("child",{
			template: "<div @click='handleClick'>child</div>",
			methods: {
				handleClick: function(){
					alert("hello");
				}
			}
		})
		var vm = new Vue({
			el: "#root"
		})
	</script>

以上。

child 标签中只能绑定自定义事件，而子组件中 div 中绑定的click 才是原生事件。

自定义事件，即由子组件emit 出来，父组件来监听的。如下。

	<div id="root">
		<child @inc="handleinc"></child>
	</div>
	<script>
		Vue.component("child",{
			template: "<div @click='handleClick'>child</div>",
			methods: {
				handleClick: function(){
					alert("hello");
					this.$emit("inc")
				}
			}
		})
		var vm = new Vue({
			el: "#root",
			methods: {
				handleinc: function(){
					alert("inc");
				}
			}
		})
	</script>

但是，父组件也可以直接绑定原生事件！不通过子组件的传递的方法！如下。

	<div id="root">
		<!-- <child @inc="handleinc"></child> -->
		<!-- 组件绑定原生事件 -->
		<child @click.native="handleinc"></child>
	</div>
	<script>
		Vue.component("child",{
			template: "<div>Child</div>"
			// template: "<div @click='handleClick'>child</div>",
			// methods: {
			// 	handleClick: function(){
			// 		alert("hello");
			// 		this.$emit("inc")
			// 	}
			// }
		})
		var vm = new Vue({
			el: "#root",
			methods: {
				handleinc: function(){
					alert("inc");
				}
			}
		})
	</script>