VUE3 開発の基本: extend を使用してコンポーネントを継承する

Vue は現在最も人気のあるフロントエンド フレームワークの 1 つであり、VUE3 は Vue フレームワークの最新バージョンです。VUE2 と比較して、VUE3 はパフォーマンスが高く、開発エクスペリエンスが優れており、多くの開発者の最初の選択肢となっています。 . . VUE3 では extends を使ってコンポーネントを継承することが非常に実用的な開発手法となっておりますので、この記事では extends を使ってコンポーネントを継承する方法を紹介します。

1. エクステンドとは何ですか?

Vue では、extends は非常に実用的な属性です。子コンポーネントが親コンポーネントのオプションを継承するために使用できます。たとえば、テンプレートは親コンポーネントで定義され、 extends 属性。サブコンポーネントに指定すると、テンプレートを再定義せずにサブコンポーネント内で直接使用できます。この継承方法により、コードの再利用が実現し、コード量が削減され、開発効率が向上します。

2. extend の使用方法

まず、親コンポーネントを定義し、テンプレートを定義して、それを HelloWorld.vue:

<template>
  <div>
    <h1 id="Hello-name">Hello, {{name}}</h1>
    <p>{{content}}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    name: {
      type: String,
      default: 'Vue3'
    },
    content: {
      type: String,
      default: 'Welcome to Vue3'
    }
  }
}
</script>

などの別のファイルとして保存する必要があります。親コンポーネントでは、テンプレートは extends 属性を通じて子コンポーネントに渡す必要があり、定義されたテンプレートは Mixins.js ファイルとして保存されます。例:

export default {
  extends: HelloWorld    //继承HelloWorld.vue
}

ここでの HelloWorld は、親で定義したコンポーネント名です。成分。

次に、Mixins.js を子コンポーネントに導入し、extends を使用して親コンポーネントのオプションを継承し、App.vue:

<template>
  <div>
    <HelloWorld />    //使用extends继承HelloWorld.vue的模板
    <p>{{message}}</p>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import Mixins from './Mixins'

export default {
  mixins: [Mixins],    //引入Mixins.js
  components: {
    HelloWorld
  },
  data() {
    return {
      message: 'This is App.vue'
    }
  }
}
</script>

などの別のファイルとして保存する必要があります。 mixins 属性は Mixins.js をインポートし、テンプレート内のコンポーネントを使用します。最後に、サブコンポーネント App.vue を Vue アプリケーションのルート コンポーネントにレンダリングする必要があります。例:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

summary

extends を使用してコンポーネントを継承するは非常に実用的な開発メソッドであり、コードの再利用を実現し、開発効率を向上させることができます。 VUE3 では、extends 属性の使用は非常に簡単で、親コンポーネントと子コンポーネントでテンプレートと継承関係を定義するだけです。この記事が開発者にとって役立ち、VUE3 開発をより快適に使用できるようになることを願っています。

以上がVUE3 開発の基本: extend を使用してコンポーネントを継承するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。