vue3 の name 属性について説明し、その使用方法を見てみましょう。

vue3 開発で <script setup> 構文を使用する場合は、コンポーネントの name 属性に対して追加の処理を行う必要があります。 vue3のname属性の使い方については以下の記事で解説していますので、お役に立てれば幸いです。

vue@3.2.34 以降の場合は、<script setup> ## を使用してください# 単一のファイル コンポーネントを使用する場合、vue はコンポーネントのファイル名に基づいて name 属性を自動的に取得します。つまり、MyComponent.vue または my-component.vue という名前のファイル、name 属性は MyComponent であり、コンポーネント内で name 属性を明示的に定義すると、派生した名前が上書きされます。 [関連する推奨事項: vuejs ビデオ チュートリアル ]

コンポーネントの name 属性は、

に使用できるだけでなく、 vuejs- devtools プラグインを使用してコードをデバッグする場合、対応するコンポーネントはその name 属性も表示できるため、コードをすばやく見つけてデバッグすることが容易になります。 name 属性を明示的に定義することをお勧めします。

さらに、

<script setup> で name 属性を表示および定義したい場合は、追加のスクリプトを追加する必要があります。つまり、

<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>

これは上で書いたものと同じであることがわかります。スクリプト タグは同じです。つまり、

unplugin-vue-define-options は vite プラグインを使用して、コンパイル段階で 2 つのスクリプトを作成できるようにし、開発を簡素化します。

(学習ビデオ共有:

Web フロントエンド開発、基本プログラミング ビデオ)

以上がvue3 の name 属性について説明し、その使用方法を見てみましょう。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。