Vue 给组件绑定原生事件

关注

原创最新推荐文章于 2026-10-31 13:05:25 发布 1.2k 阅读 AI 写同款· GEO 优化 ›

Vue之事件绑定（初识Vue事件） Vue 的事件绑定是指通过 Vue 提供的v-on指令来监听 DOM 事件，当特定事件被触发时执行相应的方法或表达式。事件绑定在 Vue 中是一种重要的交互机制，它使得开发者可以轻松地响应用户的交互行为，并进行相应的逻辑处理。当在 Vue 中使用事件绑定时，通常会使用v-on或简写形式来监听 DOM 事件，并在触发事件时执行相应的方法。监听事件：使用v-on指令来监听 DOM 事件，语法为v-on:event，其中event是要监听的事件名，例如clickmouseover等。也可以使用简写形式。阅读详情

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

	<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>

收录于