Vue学习笔记4.4 绑定原生事件

最新推荐文章于 2024-06-03 11:05:26 发布

@凌晨三点半

最新推荐文章于 2024-06-03 11:05:26 发布

阅读量148

点赞数

分类专栏： Vue.js 文章标签： Vue 绑定原生事件 .native

本文链接：https://blog.csdn.net/soulwyb/article/details/86608372

版权

Vue.js 专栏收录该内容

64 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>绑定原生组件</title>
	<script type="text/javascript" src="vue.js"></script>
</head>
<body>
	<div id="app">
		<!-- 1直接这样使用原生click是没用的因为浏览器会将此click当做自定义事件来处理 -->
		<child @click="handleClick"></child>
			<!-- 3.第二个方法就是使用.native参数。这样就可以直接使用原生事件。就不用再像第一个方法那样写那么多东西了 -->
		<child @click.native="handleChangeClick"></child>
	</div>
</body>
<script>
	Vue.component('child', {
		template: '<div @click="handleClick">Child</div>',
		methods: {
			// 2.如果想要使用原生事件。有2个方法，第一个就是使用$emit触发
			// handleClick: function() {
			// 	alert('click click')
			// 	this.$emit('abc')
			// }
		}
	})
	var vm = new Vue({
		el:'#app',
		methods: {
			handleClick: function() {
				alert('click')
			},
			handleChangeClick: function() {
				alert('new click')
			}
		}
	})
</script>
</html>