[Vue] 给组件绑定原生事件

NATIVE EVENT

例子

• 参考代码：code
• 实现功能：

给组件绑定原生事件的两种实现方法

方法一

• 注意

声明一个组件：
var child = {
	template: '<div>Click</div>',
}

使用组件并且绑定事件：
<child @click="handleClick"></child>

事件方法实现：
methods: {
	handleClick: function(){
		alert("Hello Native Event")
	}
}

• ps
  你会发现，这个click事件并没有执行
• 原因
  这样写等于在父组件中监听child子组件的一个叫click的自定义事件，然而这个事件没有在子组件中声明和发射出来，所以是无法执行的。
• 解决方案：

声明一个组件：
var child = {
	template: '<div @click="handleClick">Click</div>',
	methods:{
		handleClick:function(){
			this.$emit('click')
		}
	}
}

使用组件并且绑定事件：
<child @click="handleClick"></child>

事件方法实现：
methods: {
	handleClick: function(){
		alert("Hello Native Event")
	}
}

ps: 这样外部方法就可以实现了，但是这样写实在是太麻烦了，所以建议使用方法二

方法二

• 声明组件

var childOne = {
	template: '<div>Click</div>'
}

• 使用native关键字给组件绑定原生事件

<child-one @click.native="handleClick"></child-one>

• 实现事件

methods: {
	handleClick: function(){
		alert("Hello Native Event")
	}
}

• 这样就大功告成啦