技術とか戦略とか

SIerで証券レガシーシステムを8年いじってからSESに転職した普通の文系SEによる技術ブログ。

Vue.js:componentでpropsを使って属性を受け取る

Vue.jsでは、componentを使用して独自タグを定義することができます。
これは部品化に役立ちます。
 
独自タグではslotタグにより値を受け取ることができますが、propsプロパティを用いて属性値を受け取ることもできます。
属性値はテンプレート構文で使用できるため、dataプロパティ等と組み合わせて柔軟なDOM操作が可能になるメリットがあります。
また、今回は紹介しませんが、propsプロパティでは必須チェックやデフォルト値設定やバリデーションも実装できるので、それらの機能を実装してより便利に使うこともできます。
 
以下、サンプルコードです。
propsプロパティを用いることで、テンプレート構文での使用が可能になっていること({{ }}で囲った箇所への埋め込みが可能になっていること)に注目してください。
 
【サンプルコード】
・sample1.html(propsプロパティを使わない例)
<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>Vue.js - sample1</title>
</head>
<body>

<h1>タイトル表示テスト</h1>
<div id="app">
 <my-component>hoge</my-component>
 <my-component>fuga</my-component>
 <my-component>piyo</my-component>
</div>
<h5>※これらのタイトルはVue.jsで出力しています</h5>

<script src="https://unpkg.com/vue"></script>
<script>
Vue.component('my-component', {
 // バッククォートで囲ってHTMLを直接記述。slotの箇所に値埋め込み。
 template: `<h3>タイトル:<slot></slot></h3>`
});

// Vueオブジェクトの生成
var app = new Vue({
 el: "#app"
});
</script>
</body>
</html>
 
・sample2.html(propsプロパティを使う例)
<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>Vue.js - sample2</title>
</head>
<body>

<h1>タイトル表示テスト</h1>
<div id="app">
 <my-component title="hoge"></my-component>
 <my-component title="fuga"></my-component>
 <my-component title="piyo"></my-component>
</div>
<h5>※これらのタイトルはVue.jsで出力しています</h5>

<script src="https://unpkg.com/vue"></script>
<script>
Vue.component('my-component', {
 // シングルクォートで囲ってテンプレート構文を記述。属性値を受け取る。
 data: function () {
  return {
   titleHeader: "タイトル:"
  }
 },
 props: ['title'],
 template: '<h3>{{ titleHeader }}{{ title }}</h3>'
});

// Vueオブジェクトの生成
var app = new Vue({
 el: "#app"
});
</script>
</body>
</html>
 
【実行結果】
sample1.html、sample2.html共に、以下のように表示されます。

f:id:akira2kun:20210530164146j:plain