Written by Kasumi

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>

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

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

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

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

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

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

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

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

まとめ

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

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

関連記事

Vue.js

Vue.jsでjsonデータを読み込む方法【axiosを使おう】

2022.09.29
96
Vue.js

【Vue.js】v-modelを使いselectの値を取得。初期値を設定する方法

2022.09.25
80
Vue.js

Vue.jsでタブ切り替えを実装する方法【簡単】

2022.09.03
134
Vue.js

Vue.jsでif文を使い条件分岐する方法

2022.08.27
148