<div id="app">
<child @click="handleClick"></child>
</div>
<script>
Vue.component('child',{
template:'<p>hello</p>'
})
var vm=new Vue({
el:'#app',
methods:{
handleClick(){
alert('click')
}
}
})
</script>
当我们这么写,点击child这个组件时并不会弹出。要点击child弹出内容应该下面这么写
<div id="app">
<child @click="handleClick"></child>
</div>
<script>
Vue.component('child',{
template:'<p @click="handleChildClick">hello</p>',
methods:{
handleChildClick(){
alert('child click')
}
}
})
var vm=new Vue({
el:'#app',
methods:{
handleClick(){
alert('click')
}
}
})
</script>
在子组件p元素上绑定的事件是原生事件,在父组件child上绑定的事件是自定义事件,自定义事件触发就要通过子组件的$emit
<div id="app">
<child @click="handleClick"></child>
</div>
<script>
Vue.component('child',{
template:'<p @click="handleChildClick">hello</p>',
methods:{
handleChildClick(){
alert('child click')
this.$emit('click') //触发父组件的自定义事件
}
}
})
var vm=new Vue({
el:'#app',
methods:{
handleClick(){
alert('click')
}
}
})
</script>
但是这么通过两层的传递太麻烦了,我只想父组件上监听原生事件,有没有简单的方法,有
<div id="app">
<child @click.native="handleClick"></child>
通过修饰符.native 表示监听的不再是自定义事件,而是原生事件
</div>
<script>
Vue.component('child',{
template:'<p>hello</p>'
}
)
var vm=new Vue({
el:'#app',
methods:{
handleClick(){
alert('click')
}
}
})
</script>