vue 中自定义事件和原生Dom事件

自定义事件：子组件在父组件中使用时，直接绑定在子组件上的事件就是自定义事件，必须经过子组件的触发vm.$emit()才能执行
原生事件：直接在子组件里的模板上绑定的事件，子组件引入后是可以直接触发的

当我们给一个组件绑定一个事件的时候时候，我们绑定是一个自定义事件，而这个时候我们去点击的时候并不能直接触发这个事件，因为在组件内部并没有去emit(‘click’)这个事件。

<template>
	<div id="app">
		<child-component @click="handleClick"></child-component>
	</div>
</template>
<script>
import 'ChildComponent' from './ChildComponent'
export default {
	name: '',
	components: {ChildComponent},
	data() {
		return {}
	},
	methods: {
		// 这里调用是不会触发click事件的，因为是自定义事件，不是原生的dom事件
		handleClick() {
			console.log('trigger click')
		}
	}
}
</script>

如果想触发自定义的click事件，就得在子组件里对元素进行事件绑定，这个触发的才是原生的Dom事件。

在dom元素上绑定的事件，触发的是dom的原生事件
在组件上绑定的事件，触发的是自定义事件，需要用this.$emit(‘eventName’)来触发。

Vue.component('child-component', {
	// 组件模板自身的事件是原生dom事件，点击可以直接触发
	template: '<div @click="handleChildClick"></div>',
	methods: {
		handleChildClick() {
			console.log('触发的是dom原生事件')
			this.$emit('click', param)
		}
	}
})

而如果我们想直接触发绑定的自定义事件，怎么办呢？可以这样：使用vue为我们提供的事件修饰符：.native, 即：

<template>
	<div id="app">
		<child-component @click.native="handleClick"></child-component>
	</div>
</template>
<script>
import 'ChildComponent' from './ChildComponent'
export default {
	name: '',
	components: {ChildComponent},
	data() {
		return {}
	},
	methods: {
		// 在自定义事件上添加.native修饰符后，我们就可以直接触发click事件了
		handleClick() {
			console.log('trigger click')
		}
	}
}
</script>