给组件绑定原生事件

最新推荐文章于 2024-01-17 16:37:22 发布

A cold winter

最新推荐文章于 2024-01-17 16:37:22 发布

阅读量170

点赞数 1

分类专栏： Vue.js基础文章标签： vue

本文链接：https://blog.csdn.net/qq_41611820/article/details/102969104

版权

Vue.js基础专栏收录该内容

20 篇文章 1 订阅

订阅专栏

JavaScript的事件类型分为原生事件和自定义事件。原生事件就是比如click，change，blur这种事件，而自定义事件是指自己定义的事件。

<body>
		<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("click")
					}
				}
			})
		</script>
	</body>

在Vue中，直接按照上面这样写是无法弹出click的，也就是说handleClick方法没有执行。我们如果想要handleClick执行，通常是子组件通过发布订阅模式this.$emit()来让其执行的。

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

这种方法显然是多余且麻烦的，我们想要直接给组件绑定原生事件，可以通过"事件名.native"方法来实现：

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