[前回](http://www.chaordic.co.jp/memorandum/entry/35/)つくったコンポーネントでは、グローバル変数「zurl」にドキュメント・ルートまでのパスを設定し、グローバル・フィルター「convUrl」でパスの変換を実現しましたが、今回はもう少しスマートな方法で実現します。 # HTMLファイルからコンポーネントに値を渡す コンポーネントのテンプレートを表示させるカスタムタグには属性を追加することができ、コンポーネントに値を渡すことができます。前回使ったグローバル変数「zurl」を、カスタムタグの属性から値をコンポーネントに渡します。 **親.html** 前回 今回 **./my-header.vue** Vue.component('my-header',{ template: `

LINK1

`, props:['zurl'], methods: { convUrl: function(path){ return this.zurl + path; } } }) 今回はフィルターをつかわないで method の関数として「convPath」を使います。カスタムタグの属性は、コンポーネントに「**props:['(属性１)','(属性２)',……]** 」のように登録することでコンポーネント内部で値を参照することができるようになります。 # templateタグ 同一ヘッダーをコンテンツ全体で使い回す前提でも、特定のページでは一部内容を変更したい――そんなことは多々あります。そんな場合、先に紹介した属性をつかって条件分岐させることは想像できているでしょう。そんな時便利なのが＜template＞タグです。 ＜my-header＞の属性に「 **smenu="1"** 」を追加します。 **./my-header.vue** Vue.component('my-header',{ template: `

LINK1

`, props:['zurl','smenu'], methods: { convUrl: function(path){ return this.zurl + path; } } }) 上記のように＜template v-if="変数"＞で条件分岐できます。この場合、**smenu**に値がなければ「通常メニュー」、値があれば「特別メニュー」が表示されます。 **v-if** で非表示になったものは「display:none」ではなく、DOMとしても書き出されないことを覚えておいてください（**v-show**の非表示は「display:none」です）。また、＜template＞タグはDOMに出力されません。