Vue中.native修饰符的作用及说明
作者：chen__cheng
这篇文章主要介绍了Vue中.native修饰符的作用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue .native修饰符的作用
一般情况下，父组件要监听子组件的事件，可以通过$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可能会失效，此时可以利用 emit的方法 ， 通过使用‘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>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。