Mari kita bincangkan tentang atribut nama dalam vue3 dan lihat cara menggunakannya!

Jika anda menggunakan sintaks <script setup> dalam pembangunan vue3, anda perlu melakukan beberapa pemprosesan tambahan untuk atribut nama komponen. Artikel berikut akan bercakap dengan anda tentang kemahiran penggunaan atribut nama vue3 saya harap ia akan membantu anda!

Untuk vue@3.2.34 dan ke atas, apabila menggunakan komponen fail tunggal <script setup> , vue akan secara automatik memperoleh atribut nama berdasarkan nama fail komponen. Iaitu, fail bernama MyComponent.vue atau my-component.vue, atribut nama ialah MyComponent, dan apabila anda mentakrifkan atribut nama dalam komponen secara eksplisit, nama terbitan akan ditimpa. [Cadangan berkaitan: tutorial video vuejs]

Atribut nama komponen bukan sahaja boleh digunakan untuk <KeepAlive>, tetapi juga apabila menggunakan pemalam vuejs-devtools untuk menyahpepijat kod, komponen yang sepadan juga boleh Atribut namanya boleh dipaparkan untuk memudahkan kami mencari kod dan menyahpepijatnya dengan cepat. Mentakrifkan atribut nama secara eksplisit ialah amalan yang baik.

Selain itu, jika kita ingin memaparkan dan mentakrifkan atribut nama dalam <script setup>, kita perlu menambah skrip tambahan, iaitu:

<script>
  export default {
    name: "MyComponent"
  }
</script>

<script setup>
...
<script>

Ia adalah sedikit menyusahkan, tetapi ini Masyarakat memperkenalkan unplugin-vue-define-options untuk memudahkannya.

Langkahnya sangat mudah:

1 Pasang

npm i unplugin-vue-define-options -D

2 Konfigurasikan 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 membangunkan, anda perlu Konfigurasikan skrip taip untuk menyokong

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["unplugin-vue-define-options/macros-global" /* ... */]
  }
}

Selepas pemasangan dan konfigurasi selesai, anda boleh menggunakan API defineOptions untuk mentakrifkan atribut nama.

<script setup>
defineOptions({
  name: "MyComponent"  
})
<script>

Jadi bagaimana ia melakukannya?

Untuk kod menggunakan defineOptions:

<script setup>
import { useSlots } from 'vue'
  
defineOptions({
  name: 'Foo',
  inheritAttrs: false,
})
const slots = useSlots()
</script>

Output yang disusun ialah:

<script>
export default {
  name: 'Foo',
  inheritAttrs: false,
  props: {
    msg: { type: String, default: 'bar' },
  },
  emits: ['change', 'update'],
}
</script>

<script setup>
const slots = useSlots()
</script>

Ia boleh didapati bahawa ini adalah sama seperti yang kami tulis di atas Teg skrip adalah sama, iaitu, unplugin-vue-define-options menggunakan pemalam vite untuk membantu kami menulis dua skrip semasa fasa penyusunan, memudahkan pembangunan kami.

(Mempelajari perkongsian video: pembangunan bahagian hadapan web, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Mari kita bincangkan tentang atribut nama dalam vue3 dan lihat cara menggunakannya!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!