• Vue.js

Vue.jsでHTML要素をコンポーネント化（パーツ化）する方法

Vue.jsを使って、同じ内容のHTML要素をパーツ化する方法について知りたい。

本記事ではコンポーネント化（パーツ化）する方法について解説します。

コンポーネントとは？

コンポーネントとはHTML要素を任意の名前でパーツ化して、再利用する事が出来るメソッドの一つです。

コンポーネントの使い方

<div id="app">
  <h2title></h2title>
</div>
<script>
const app = Vue.createApp({
  data() {
    return {};
  },
});
// コンポーネント化
app.component("h2title", {
  template: "<h2>コンポーネントとは？</h2>",
});
app.mount("#app");
</script>

コンポーネント化したコード例です。

h2タグをパーツ化してます。

まずは以下の通り任意のコンポーネント名を決め、タグにして設置したい箇所に配置します。

<任意のコンポーネント名></任意のコンポーネント名>

上記タグ内にVue.jsでコンポーネント化したhtmlが出力されます。

コンポーネント化するにはcomponentメソッドを使います。

使い方は以下の通りです。

Vueのインスタンス変数.component(“任意のコンポーネント名”, {
　template: “パーツ化したいHTML要素”
});

上記のように定義する事で、パーツ化して使いまわせます。

propsを使って中身を変更

  <h2title text="コンポーネントとは？"></h2title>
  <h2title text="コンポーネントの使い方"></h2title>
</div>
<script>
const app = Vue.createApp({
  data() {
    return {};
  },
});
// コンポーネント化
app.component("h2title", {
// propsを定義
  props: ["text"],
  template: "<h2>{{text}}</h2>",
});
app.mount("#app");
</script>

コンポーネント化したＨTML要素の中身だけ変更して使い回すコード例です。

propsオプションを使います。

使い方は以下の通りです。

props: [“任意の属性名”],

上記をcomponentメソッド内で定義。

template内に入ってるHTML要素の、中身を変更をしたい箇所に上記propsで設定した属性名を{{}}で指定します。

最後にtemplateタグに上記任意の属性を指定。

値に中身を変更したい文字列等を記述して設定完了です。

まとめ

Vue.jsでHTML要素をコンポーネント化（パーツ化）する方法について紹介しました。

以上で解説を終わります。