クラスコンポーネントとは？サンプルコード付きで解説【Vue.js】

JavaScript

2023年03月08日11:45

この記事は約2分で読めます。

この記事の最終更新日: 2023年3月8日

Vue.jsクラスコンポーネントは、Vue.jsのコンポーネントをクラスベースで定義する方法です。従来のオブジェクトベースのコンポーネント定義に代わる新しい方法として導入されました。

クラスコンポーネントを使用すると、よりオブジェクト指向的なアプローチでコンポーネントを記述できます。クラスはES6のクラス構文を使用して定義され、コンポーネントの状態やライフサイクルフックなどのプロパティとメソッドを明示的に宣言することができます。

クラスコンポーネントの例を示します。

import Vue from 'vue';

export default class MyComponent extends Vue {
  message = 'Hello world';

  mounted() {
    console.log('Component mounted!');
  }

  handleClick() {
    console.log('Button clicked!');
  }
}

この例では、MyComponentクラスがVueのサブクラスとして定義されています。messageプロパティはクラスのインスタンス変数として定義されており、mountedメソッドはコンポーネントのライフサイクルフックの1つとして定義されています。また、handleClickメソッドはイベントハンドラとして定義されています。

クラスコンポーネントを使用すると、複数のコンポーネントで共通のプロパティやメソッドを再利用することができるため、コードの再利用性が向上します。また、クラスベースのアプローチは、複雑なコンポーネントの開発に役立つことがあります。