如果你在 vue3 開發中使用了 <script setup>
語法的話,對於元件的 name 屬性,需要做一番額外的處理。以下這篇文章就來和大家聊聊vue3 name 屬性的使用技巧,希望對大家有幫助!
對於vue@3.2.34 及以上版本,在使用<script setup>
的單一檔案元件時,vue 會根據元件檔名,自動推導出name 屬性。也就是名為 MyComponent.vue 或 my-component.vue 的文件, name 屬性為 MyComponent,而當你在元件內顯示定義 name 屬性時,會覆寫推導出的名稱。 【相關推薦:vuejs影片教學】
元件的name 屬性不僅能用於
<KeepAlive>
,而且在使用vuejs- devtools
外掛程式偵錯程式碼的時候,對應元件也能顯示出其name 屬性,方便我們快速定位程式碼和偵錯。顯示的定義 name 屬性,是個好習慣。
除此之外,如果我們要在<script setup>
顯示定義name 屬性,需要額外新增一個script,也就是:
<script> export default { name: "MyComponent" } </script> <script setup> ... <script>
稍微繁瑣,對此社群推出了unplugin-vue-define-options
來簡化該操作。
使用步驟非常簡單:
1、安裝
npm i unplugin-vue-define-options -D
2、設定vite
// vite.config.ts import DefineOptions from 'unplugin-vue-define-options/vite' import Vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [Vue(), DefineOptions()], })
3、使用typescript 開發的話,需要設定typescript 支援
// tsconfig.json { "compilerOptions": { // ... "types": ["unplugin-vue-define-options/macros-global" /* ... */] } }
安裝設定完成後,就能使用其提供的defineOptions
API 來定義name 屬性。
<script setup> defineOptions({ name: "MyComponent" }) <script>
那麼它是如何做到這一點的呢?
對於使用了defineOptions
的程式碼:
<script setup> import { useSlots } from 'vue' defineOptions({ name: 'Foo', inheritAttrs: false, }) const slots = useSlots() </script>
#編譯後輸出為:
<script> export default { name: 'Foo', inheritAttrs: false, props: { msg: { type: String, default: 'bar' }, }, emits: ['change', 'update'], } </script> <script setup> const slots = useSlots() </script>
可以發現,這和我們在上文中書寫2 個script 標籤是一樣的,也就是說,unplugin-vue-define-options
透過vite 插件的方式,在編譯階段幫我們做了寫2 個script 這一步,簡化了我們的開發。
以上是聊聊vue3中的name屬性,看看怎麼使用!的詳細內容。更多資訊請關注PHP中文網其他相關文章!