Vue中‘.native‘修饰符的作用

最新推荐文章于 2025-10-28 05:31:22 发布

原创最新推荐文章于 2025-10-28 05:31:22 发布 · 8.2k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue

VUE 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Vue中实现父组件监听子组件的原生事件，包括使用v-on的.native修饰符监听根元素事件及利用$emit配合listeners监听非根元素事件的方法。

一般情况下，父组件要监听子组件的事件，可以通过$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 的方法，通过使用 ‘$ 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>