组件上监听原生事件

组件上监听原生事件

父组件中

<template>
	<div>
		<h1>.native修饰符</h1>
		<div @click="onParentClick">父组件里的div</button>
		<Child />
	</div>
</template>

<script>
	//引入Child组件
	import Child from './components/Child'

	export default {
		components:{
			Child
		},
		methods: {
			onParentClick(){
				console.log('parent clicked!')
			}
		}
	}
</script>

子组件中

<template>
	<div>
		<div @click="onChildClick">子组件里的div</button>
	</div>
</template>

<script>
	export default {
		methods: {
			onChildClick(){
				console.log('child clicked!')
			}
		}
	}
</script>

如果想在父组件上写子组件的事件，则需要使用 .native ，否则监听不到点击没有反应

<template>
	<div>
		<h1>.native修饰符</h1>
		<div @click="onParentClick">父组件里的div</button>
		<Child @click.native="onChildClick" />
	</div>
</template>

<script>
	//引入Child组件
	import Child from './components/Child'

	export default {
		components:{
			Child
		},
		methods: {
			onParentClick(){
				console.log('parent clicked!')
			},
			onChildClick(){
				console.log('child clicked!')
			}
		}
	}
</script>