一般情况下,父组件要监听子组件的事件,可以通过$emit的方式。但是如果父组件要监听子组件的原生事件,比如:input的focus事件。此时可以通过使用v-on的.native
修饰符达到目的。
.native 可以在某组件的根元素上监听一个原生事件
从上面的语句可以看出,.native作用于组件的根元素。
所以如果需要监听的元素是作为根元素,此时.native完全适用
例如:
父组件
<template>
<div id="app">
<baseLabel v-on:focus.native="onFocus"/>
</div>
</template>
<script>
import baseLabel from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
baseLabel
},
methods: {
onFocus() {
console.log('lalalalal');
}
}
}
</script>
子组件:
<template>
<input type="text"/>
</template>
<script>
export default {
name: 'baseLabel',
}
</script>
效果:
但是如果目标预监听的元素不是根元素,那么.native
可能会失效,此时可以利用
e
m
i
t
的
方
法
,
通
过
使
用
‘
emit的方法,通过使用`
emit的方法,通过使用‘listeners来获得父组件在子组件上加上的除
.native的事件。 子组件则监听这些事件,当事件发生通知父组件 这个时候就不需要使用
.native`修饰符就可以监听原生事件了
实例:
父组件
<template>
<div id="app">
<baseLabel v-on:focus="onFocus"/>
</div>
</template>
<script>
import baseLabel from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
baseLabel
},
methods: {
onFocus() {
console.log('lalalalal');
}
}
}
</script>
子组件
<template>
<label>
<input v-on="inputListeners"/>
</label>
</template>
<script>
export default {
name: 'baseLabel',
computed: {
inputListeners() {
var vm = this
// 将所有的对象整合在一起
return Object.assign({},
// 从父组件添加所有的监听器
this.$listeners,
// 添加自定义的监听器
{
// 确保v-model正常工作
input(event) {
vm.$emit('input',event.target.value)
}
})
}
}
}
</script>