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