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>

最后

以上就是坦率鱼为你收集整理的Vue 给组件绑定原生事件的全部内容，希望文章能够帮你解决Vue 给组件绑定原生事件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。