Vue中.native修饰符的作用及说明

更新时间：2024年03月24日 09:59:08 作者：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>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解vue如何封装封装一个上传多张图片的组件
上传图片不管是后台还是前端小程序，上传图片都是一个比不可少的功能有时候需要好几个页面都要上传图片，每个页面都写一个非常不方便，本文就给大家介绍vue如何封装一个上传多张图片的组件,需要的朋友可以参考下
2023-07-07
图文详解keep-alive如何清除缓存
vue项目中常常会用到keepalive来作缓存,在应付基本要求上能够说很是方便,可是遇到同一个页面,根据条件不一样,分别缓存或者不缓存,就有些麻烦了,这篇文章主要给大家介绍了关于keep-alive如何清除缓存的相关资料,需要的朋友可以参考下
2021-08-08
利用VUE框架，实现列表分页功能示例代码
本篇文章主要介绍了利用VUE框架，实现列表分页功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-01-01
Vue使用高德地图实现城市定位
这篇文章主要为大家详细介绍了Vue使用高德地图实现城市定位，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
基于Vue.js 2.0实现百度搜索框效果
这篇文章主要为大家详细介绍了基于Vue.js 2.0实现百度搜索框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-09-09
Vue科学计数法常见处理方法举例
这篇文章主要给大家介绍了关于Vue科学计数法常见处理方法的相关资料,科学计数法是科学家用来表示很大或很小的数字的一种方便的方法,文中给出了详细的代码示例,需要的朋友可以参考下
2024-02-02
vue引入elementUi后打开页面报错Uncaught TypeError的解决方式
这篇文章主要给大家介绍了关于vue引入elementUi后打开页面报错Uncaught TypeError: Cannot read properties of undefined(reading ‘prototype‘)的解决方式,文中通过图文介绍的非常详细,需要的朋友可以参考下
2022-08-08
浅谈vue中$bus的使用和涉及到的问题
这篇文章主要介绍了浅谈vue中$bus的使用和涉及到的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue-cli4项目开启eslint保存时自动格式问题
这篇文章主要介绍了vue-cli4项目开启eslint保存时自动格式的问题小结，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-07-07
Vue中props的详解
这篇文章主要介绍了Vue中props的详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05