Vue中.native修飾符的作用及說(shuō)明

更新時(shí)間：2024年03月24日 09:59:08 作者：chen__cheng

這篇文章主要介紹了Vue中.native修飾符的作用及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue .native修飾符的作用

一般情況下，父組件要監(jiān)聽(tīng)子組件的事件，可以通過(guò)$emit的方式。

但是如果父組件要監(jiān)聽(tīng)子組件的原生事件，比如：input的focus事件。

此時(shí)可以通過(guò)使用v-on的.native修飾符達(dá)到目的。

.native 可以在某組件的 根元素 上監(jiān)聽(tīng)一個(gè)原生事件

從上面的語(yǔ)句可以看出

.native作用于組件的根元素。

所以如果需要監(jiān)聽(tīng)的元素是作為根元素，此時(shí).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>

效果：

效果圖

但是如果目標(biāo)預(yù)監(jiān)聽(tīng)的元素不是根元素，那么.native可能會(huì)失效，此時(shí)可以利用 emit的方法，通過(guò)使用‘emit的方法，通過(guò)使用` emit的方法，通過(guò)使用‘listeners.native的事件。

子組件則監(jiān)聽(tīng)這些事件，當(dāng)事件發(fā)生通知父組件這個(gè)時(shí)候就不需要使用

.native`修飾符就可以監(jiān)聽(tīng)原生事件了

實(shí)例：

父組件

<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
      // 將所有的對(duì)象整合在一起
      return Object.assign({},
      // 從父組件添加所有的監(jiān)聽(tīng)器
      this.$listeners,
      // 添加自定義的監(jiān)聽(tīng)器
      {
      // 確保v-model正常工作
        input(event) {
          vm.$emit('input',event.target.value)
        }
      })
    }
  }
}
</script>

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解vue如何封裝封裝一個(gè)上傳多張圖片的組件
上傳圖片不管是后臺(tái)還是前端小程序，上傳圖片都是一個(gè)比不可少的功能有時(shí)候需要好幾個(gè)頁(yè)面都要上傳圖片，每個(gè)頁(yè)面都寫(xiě)一個(gè)非常不方便，本文就給大家介紹vue如何封裝一個(gè)上傳多張圖片的組件,需要的朋友可以參考下
2023-07-07
圖文詳解keep-alive如何清除緩存
vue項(xiàng)目中常常會(huì)用到keepalive來(lái)作緩存,在應(yīng)付基本要求上能夠說(shuō)很是方便,可是遇到同一個(gè)頁(yè)面,根據(jù)條件不一樣,分別緩存或者不緩存,就有些麻煩了,這篇文章主要給大家介紹了關(guān)于keep-alive如何清除緩存的相關(guān)資料,需要的朋友可以參考下
2021-08-08
利用VUE框架，實(shí)現(xiàn)列表分頁(yè)功能示例代碼
本篇文章主要介紹了利用VUE框架，實(shí)現(xiàn)列表分頁(yè)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-01-01
Vue使用高德地圖實(shí)現(xiàn)城市定位
這篇文章主要為大家詳細(xì)介紹了Vue使用高德地圖實(shí)現(xiàn)城市定位，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
基于Vue.js 2.0實(shí)現(xiàn)百度搜索框效果
這篇文章主要為大家詳細(xì)介紹了基于Vue.js 2.0實(shí)現(xiàn)百度搜索框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
Vue科學(xué)計(jì)數(shù)法常見(jiàn)處理方法舉例
這篇文章主要給大家介紹了關(guān)于Vue科學(xué)計(jì)數(shù)法常見(jiàn)處理方法的相關(guān)資料,科學(xué)計(jì)數(shù)法是科學(xué)家用來(lái)表示很大或很小的數(shù)字的一種方便的方法,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下
2024-02-02
vue引入elementUi后打開(kāi)頁(yè)面報(bào)錯(cuò)Uncaught?TypeError的解決方式
這篇文章主要給大家介紹了關(guān)于vue引入elementUi后打開(kāi)頁(yè)面報(bào)錯(cuò)Uncaught?TypeError:?Cannot?read?properties?of?undefined(reading?‘prototype‘)的解決方式,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
淺談vue中$bus的使用和涉及到的問(wèn)題
這篇文章主要介紹了淺談vue中$bus的使用和涉及到的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
vue-cli4項(xiàng)目開(kāi)啟eslint保存時(shí)自動(dòng)格式問(wèn)題
這篇文章主要介紹了vue-cli4項(xiàng)目開(kāi)啟eslint保存時(shí)自動(dòng)格式的問(wèn)題小結(jié)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-07-07
Vue中props的詳解
這篇文章主要介紹了Vue中props的詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05