初识 Vue（17）---（给组件绑定原生事件）

最新推荐文章于 2023-07-01 17:29:37 发布

姜皓

最新推荐文章于 2023-07-01 17:29:37 发布

阅读量256

点赞数 1

分类专栏： # Vue # 从浅入深学 Vue

本文链接：https://blog.csdn.net/jianghao233/article/details/81261535

版权

Vue 同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

从浅入深学 Vue

28 篇文章 8 订阅

订阅专栏

给组件绑定原生事件

示例：点击文本弹出警示框

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>给组件绑定原生事件</title>
	<script src="./vue.js"></script>
</head>
<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>
</html>

输出：可以正常输出，但点击没有任何效果

当给一个组件绑定一个事件时候，实际上这个事件是一个自定义的事件（鼠标点击触发的事件并不是真正绑定的事件）

想触发自定义事件，给子组件的元素进行事件绑定，这个事件才是真正原生的事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>给组件绑定原生事件</title>
	<script src="./vue.js"></script>
</head>
<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>
</html>

输出：点击 click ---子组件监听到自身的 DIV 被点击---向外触发自定义事件---在组件里监听到自定义事件---

handleClick 事件被执行

更加简便的方法

添加 .native 修饰符，这时就会触发原生事件，而不是自定义事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>给组件绑定原生事件</title>
	<script src="./vue.js"></script>
</head>
<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>
</html>

输出：