vue 自定义组件@click无效

沐水莲心

于 2020-10-05 11:45:01 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： # vue

沐水莲心

本文链接：https://blog.csdn.net/qq_43314956/article/details/108927088

vue 专栏收录该内容

4 篇文章

订阅专栏

在Vue中，当尝试在自定义组件上使用@click事件时，发现事件未正常触发。问题在于，对于自定义组件，需要使用@click.native来绑定原生点击事件。通过在组件模板的@click指令上添加.native修饰符，可以成功解决点击事件失效的问题。

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

vue 自定义组件@click无效

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcss.com/vue/2.6.4/vue.js"></script>
		<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
		<style type="text/css">
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<login :son="msg" @click="pop()"/>
		</div>
		</body>
</html>
<script>
	new Vue({
		el:	"#app",
		data:{
			msg:'父组件'
		},
		methods:{
			pop() {
				console('点击事件')
			}
		},
		components:{
			login:{
				template: "<h4>这是一个组件----{{son}}</h4>",
				props:['son']
			}
		}
	})
</script>