Vue中.native修飾符的作用及說(shuō)明
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)文章
之前關(guān)于vsCode一鍵生成vue模，最近需要回顧，就順便發(fā)到隨筆上了，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
前端項(xiàng)目vue3/React如何使用pako庫(kù)解壓縮后端返回gzip數(shù)據(jù)
pako是一個(gè)流行的JS庫(kù),用于在瀏覽器中進(jìn)行數(shù)據(jù)壓縮和解壓縮操作,它提供了對(duì)常見(jiàn)的壓縮算法的實(shí)現(xiàn),使開(kāi)發(fā)者能夠在客戶(hù)端上輕松進(jìn)行數(shù)據(jù)壓縮和解壓縮,這篇文章主要介紹了前端項(xiàng)目vue3/React使用pako庫(kù)解壓縮后端返回gzip數(shù)據(jù),需要的朋友可以參考下2024-07-07
下面小編就為大家分享一篇在vue中實(shí)現(xiàn)圖片和文件上傳的示例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue3使用vant檢索組件van-search遇到的問(wèn)題小結(jié)
當(dāng)清空按鈕與檢索按鈕同時(shí)居右時(shí),點(diǎn)擊clear清空按鈕事件時(shí)會(huì)同時(shí)觸發(fā)click-right-icon事件,這個(gè)時(shí)候容易觸發(fā)一系列問(wèn)題,小編小編給大家分享Vue3使用vant檢索組件van-search遇到的問(wèn)題小結(jié),感興趣的朋友一起看看吧2024-02-02
這篇文章主要介紹了vue父子組件的數(shù)據(jù)傳遞示例,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
這篇文章介紹了Vue.js中v-show和v-if指令的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
Vue.js中關(guān)于偵聽(tīng)器（watch）的高級(jí)用法示例
Vue.js 提供了一個(gè)方法 watch，它用于觀察Vue實(shí)例上的數(shù)據(jù)變動(dòng)。下面這篇文章主要給大家介紹了關(guān)于Vue.js中關(guān)于偵聽(tīng)器（watch）的高級(jí)用法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-05-05
vue中如何使用echarts和echarts-gl實(shí)現(xiàn)3D餅圖環(huán)形餅圖
現(xiàn)在vue是很多公司前端的主流框架,我目前所在公司接觸的項(xiàng)目也都是使用vue來(lái)實(shí)現(xiàn)的,很少有完全使用原生的JavaScript來(lái)寫(xiě)項(xiàng)目的了,下面這篇文章主要給大家介紹了關(guān)于vue中如何使用echarts和echarts-gl實(shí)現(xiàn)3D餅圖環(huán)形餅圖的相關(guān)資料,需要的朋友可以參考下2023-03-03
文章介紹了一個(gè)父組件和子組件的交互過(guò)程,父組件通過(guò)點(diǎn)擊“關(guān)聯(lián)公司”輸入框彈出子組件dialog,子組件中使用SelectCompany.vue實(shí)現(xiàn)默認(rèn)選中功能,作者分享了個(gè)人經(jīng)驗(yàn),希望能對(duì)大家有所幫助2025-01-01
解決Vue 刷新頁(yè)面導(dǎo)航顯示高亮位置不對(duì)問(wèn)題
這篇文章主要介紹了解決Vue 刷新頁(yè)面導(dǎo)航顯示高亮位置不對(duì)問(wèn)題,本文圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12