Vue 给组件绑定原生事件

给一个组件绑定原生事件，如下方法是错误的！

	<div id="root">
		<child @click="handleClick"></child>
	</div>
	<script>
		Vue.component("child",{
			template: "<div>child</div>"
		})
		var vm = new Vue({
			el: "#root",
			methods: {
				handleClick: function(){
					alert("hello");
				}
			}
		})
	</script>

得在组件中进行绑定，下面就是正确的绑定方法，是原生事件。

	<div id="root">
		<child></child>
	</div>
	<script>
		Vue.component("child",{
			template: "<div @click='handleClick'>child</div>",
			methods: {
				handleClick: function(){
					alert("hello");
				}
			}
		})
		var vm = new Vue({
			el: "#root"
		})
	</script>

以上。

child 标签中只能绑定自定义事件，而子组件中 div 中绑定的click 才是原生事件。

自定义事件，即由子组件emit 出来，父组件来监听的。如下。

	<div id="root">
		<child @inc="handleinc"></child>
	</div>
	<script>
		Vue.component("child",{
			template: "<div @click='handleClick'>child</div>",
			methods: {
				handleClick: function(){
					alert("hello");
					this.$emit("inc")
				}
			}
		})
		var vm = new Vue({
			el: "#root",
			methods: {
				handleinc: function(){
					alert("inc");
				}
			}
		})
	</script>

 

但是，父组件也可以直接绑定原生事件！不通过子组件的传递的方法！如下。

	<div id="root">
		<!-- <child @inc="handleinc"></child> -->
		<!-- 组件绑定原生事件 -->
		<child @click.native="handleinc"></child>
	</div>
	<script>
		Vue.component("child",{
			template: "<div>Child</div>"
			// template: "<div @click='handleClick'>child</div>",
			// methods: {
			// 	handleClick: function(){
			// 		alert("hello");
			// 		this.$emit("inc")
			// 	}
			// }
		})
		var vm = new Vue({
			el: "#root",
			methods: {
				handleinc: function(){
					alert("inc");
				}
			}
		})
	</script>