Vue中.native修飾符的作用及說明
更新時間：2024年03月24日 09:59:08 作者：chen__cheng
這篇文章主要介紹了Vue中.native修飾符的作用及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue .native修飾符的作用
一般情況下，父組件要監(jiān)聽子組件的事件，可以通過$emit的方式。
但是如果父組件要監(jiān)聽子組件的原生事件，比如：input的focus事件。
此時可以通過使用v-on的.native修飾符達到目的。
.native 可以在某組件的 根元素 上監(jiān)聽一個原生事件
從上面的語句可以看出
.native作用于組件的根元素。
所以如果需要監(jiān)聽的元素是作為根元素，此時.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>
效果：
但是如果目標預(yù)監(jiān)聽的元素不是根元素，那么.native可能會失效，此時可以利用 emit的方法 ， 通過使用‘emit的方法，通過使用` emit的方法，通過使用‘listeners.native的事件。
子組件則監(jiān)聽這些事件，當事件發(fā)生通知父組件 這個時候就不需要使用
.native`修飾符就可以監(jiān)聽原生事件了
實例：
父組件
<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({},
// 從父組件添加所有的監(jiān)聽器
this.$listeners,
// 添加自定義的監(jiān)聽器
{
// 確保v-model正常工作
input(event) {
vm.$emit('input',event.target.value)
}
})
}
}
}
</script>
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
上傳圖片不管是后臺還是前端小程序，上傳圖片都是一個比不可少的功能有時候需要好幾個頁面都要上傳圖片，每個頁面都寫一個非常不方便，本文就給大家介紹vue如何封裝一個上傳多張圖片的組件,需要的朋友可以參考下2023-07-07
vue項目中常常會用到keepalive來作緩存,在應(yīng)付基本要求上能夠說很是方便,可是遇到同一個頁面,根據(jù)條件不一樣,分別緩存或者不緩存,就有些麻煩了,這篇文章主要給大家介紹了關(guān)于keep-alive如何清除緩存的相關(guān)資料,需要的朋友可以參考下2021-08-08
本篇文章主要介紹了利用VUE框架，實現(xiàn)列表分頁功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-01-01
這篇文章主要為大家詳細介紹了Vue使用高德地圖實現(xiàn)城市定位，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家詳細介紹了基于Vue.js 2.0實現(xiàn)百度搜索框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要給大家介紹了關(guān)于Vue科學(xué)計數(shù)法常見處理方法的相關(guān)資料,科學(xué)計數(shù)法是科學(xué)家用來表示很大或很小的數(shù)字的一種方便的方法,文中給出了詳細的代碼示例,需要的朋友可以參考下2024-02-02
vue引入elementUi后打開頁面報錯Uncaught?TypeError的解決方式
這篇文章主要給大家介紹了關(guān)于vue引入elementUi后打開頁面報錯Uncaught?TypeError:?Cannot?read?properties?of?undefined(reading?‘prototype‘)的解決方式,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了淺談vue中$bus的使用和涉及到的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue-cli4項目開啟eslint保存時自動格式的問題小結(jié)，本文給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了Vue中props的詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2019-05-05