22.如何给组件编写原生事件

发表于 分类于 ， 阅读次数： 本文字数： 1.3k 阅读时长 ≈ 1 分钟
引言：

给自定义组件编写的自定义事件直接声明是没有作用的

那么该怎么触发组件的事件呢？

如果像这样,发现点击一下，没有触发这个事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
	<div id="root">
		<child @click="handleClick"></child>
		<!--是自定义事件，这里的事件并没有触发,  -->
	</div>

	<script>
		Vue.component('child',{
			template:'<div>child</div>',
		})

		let vm = new Vue({
			el:'#root',
			methods:{
				handleClick(){
					alert("click")
				}
			}
		})
	</script>
</body>

想要触发这个事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<body>
	<div id="root">
		<child @click="handleClick"></child>
		<!--是自定义事件，这里的事件并没有触发,  -->
	</div>

	<script>
		Vue.component('child',{
			template:'<div @click="handleChildClick">child</div>',
			//是原生事件，这里会触发
			methods:{
				handleChildClick(){
					alert("child");
					//想要触发自定义事件
					this.$emit("click")
				}
			}
		})

		let vm = new Vue({
			el:'#root',
			methods:{
				handleClick(){
					alert("click")
				}
			}
		})
	</script>
</body>

但是这样也太麻烦了，

我就想给它加原生事件，怎么办呢

1
2
3
4
<div id="root">
	<child @click.native="handleClick"></child>
    <!--事件加一个.native就可以把这个事件变为原生事件-->
</div>

很简单，这样就解决了