vue3 name 屬性的使用技巧詳解
引言
如果你在 vue3 開(kāi)發(fā)中使用了 <script setup> 語(yǔ)法的話，對(duì)于組件的 name 屬性，需要做一番額外的處理。
對(duì)于 vue@3.2.34 及以上版本，在使用 <script setup> 的單文件組件時(shí)，vue 會(huì)根據(jù)組件文件名，自動(dòng)推導(dǎo)出 name 屬性。也就是名為 MyComponent.vue 或 my-component.vue 的文件， name 屬性為 MyComponent，而當(dāng)你在組件內(nèi)顯示定義 name 屬性時(shí)，會(huì)覆蓋推導(dǎo)出的名稱。
組件的 name 屬性不僅能用于 <KeepAlive>，而且在使用 vuejs-devtools 插件調(diào)試代碼的時(shí)候，對(duì)應(yīng)組件也能顯示出其 name 屬性，方便我們快速定位代碼和調(diào)試。顯示的定義 name 屬性，是一個(gè)好習(xí)慣。
除此之外，如果我們要在 <script setup> 顯示定義 name 屬性，需要額外添加一個(gè) script，也就是：
<script>
export default {
name: "MyComponent"
}
</script>
<script setup lang="ts">
...
<script>
稍顯繁瑣，對(duì)此社區(qū)推出了 unplugin-vue-define-options 來(lái)簡(jiǎn)化該操作。
使用步驟
- 安裝
npm i unplugin-vue-define-options -D
- 配置 vite
// vite.config.ts
import DefineOptions from 'unplugin-vue-define-options/vite'
import Vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [Vue(), DefineOptions()],
})
- 使用 typescript 開(kāi)發(fā)的話，需要配置 typescript 支持
// tsconfig.json
{
"compilerOptions": {
// ...
"types": ["unplugin-vue-define-options/macros-global" /* ... */]
}
}
安裝配置完成后，就能使用其提供的 defineOptions API 來(lái)定義 name 屬性。
<script setup lang="ts">
defineOptions({
name: "MyComponent"
})
<script>
那么它是如何做到這一點(diǎn)的呢？
對(duì)于使用了 defineOptions 的代碼：
<script setup lang="ts">
import { useSlots } from 'vue'
defineOptions({
name: 'Foo',
inheritAttrs: false,
})
const slots = useSlots()
</script>
編譯后輸出為：
<script lang="ts">
export default {
name: 'Foo',
inheritAttrs: false,
props: {
msg: { type: String, default: 'bar' },
},
emits: ['change', 'update'],
}
</script>
<script setup>
const slots = useSlots()
</script>
可以發(fā)現(xiàn)，這和我們?cè)谏衔闹袝鴮?2 個(gè) script 標(biāo)簽是一樣的，也就是說(shuō)，unplugin-vue-define-options 通過(guò) vite 插件的方式，在編譯階段幫我們做了編寫 2 個(gè) script 這一步，簡(jiǎn)化了我們的開(kāi)發(fā)。
以上就是vue3 name 屬性的使用技巧詳解的詳細(xì)內(nèi)容，更多關(guān)于vue3 name 屬性使用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
使用webpack打包后的vue項(xiàng)目如何正確運(yùn)行（express）
這篇文章主要介紹了使用webpack打包后的vue項(xiàng)目如何正確運(yùn)行（express） ,接下來(lái)通過(guò)本文給大家詳細(xì)介紹，需要的朋友可以參考下2018-10-10
vue組件中使用props傳遞數(shù)據(jù)的實(shí)例詳解
這篇文章主要介紹了vue組件中使用props傳遞數(shù)據(jù)的實(shí)例詳解,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-04-04
elementUI多選框反選的實(shí)現(xiàn)代碼
這篇文章主要介紹了elementUI多選框反選的實(shí)現(xiàn)代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue3 reactive函數(shù)用法實(shí)戰(zhàn)教程
reactive是Vue3中提供實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的方法，reactive的用法與ref的用法相似，也是將數(shù)據(jù)變成響應(yīng)式數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)UI也會(huì)自動(dòng)更新，這篇文章主要介紹了vue3 reactive函數(shù)用法,需要的朋友可以參考下2022-11-11
Vue 最獨(dú)特的特性之一，是非侵入式的響應(yīng)系統(tǒng)。數(shù)據(jù)模型僅僅是普通的 JavaScript 對(duì)象。而當(dāng)你修改它們時(shí)，視圖會(huì)進(jìn)行更新。本文將通過(guò)示例詳解Vue的響應(yīng)式原理，感興趣的可以了解一下2022-03-03
在做文字處理的項(xiàng)目時(shí)經(jīng)常會(huì)遇到搜索文字并高亮的需求,本文就來(lái)介紹vue 指定文字高亮的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
Vue2項(xiàng)目中Mock.js的完整集成與使用教程
Mock.js 是一個(gè)可以在開(kāi)發(fā)階段模擬后端數(shù)據(jù)接口的 JavaScript 庫(kù),它能夠生成大量不同類型的隨機(jī)數(shù)據(jù),并且模擬真實(shí)的接口返回,允許前端開(kāi)發(fā)在沒(méi)有真實(shí)后端接口的情況下進(jìn)行開(kāi)發(fā),本文給大家介紹了Vue2項(xiàng)目中Mock.js的完整集成與使用教程,需要的朋友可以參考下2025-02-02
Vue偵測(cè)相關(guān)api的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue偵測(cè)相關(guān)api，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要給大家介紹了關(guān)于vue操作dom元素的3種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
vue項(xiàng)目創(chuàng)建并引入餓了么elementUI組件的步驟
這篇文章主要介紹了vue項(xiàng)目創(chuàng)建并引入餓了么elementUI組件的步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04