読者です 読者をやめる 読者になる 読者になる

俺、サービス売って家買うんだ

Swift, Vue.js, 統計, GCP / このペースで作ってればいつか2-3億で売れるのがポっと出来るんじゃなかろうか

Vue.jsで親テンプレートから子テンプレートに表示するコンテンツを制御する

Vue.js JavaScript
f:id:ie-kau:20150818232251p:plain

Vue.jsでコンポーネントを定義するときに、コンポーネントを使いまわしつつ表示する文言を変えたいってこと結構ありますよね。

例えば

  • 同じモーダル用コンポーネントを利用しつつモーダルに表示する文言だけ変える

とは言えJSのから変数として文字列を渡すのもあまりイケてる実装とはいえませんね。
そんなときはという要素を利用して、子のコンポーネントに渡すコンテンツを親のマークアップに定義することができます。

slot要素

そんな時はslotというAPIを利用すると上手い具合にいきます。

下記の実装では、 app内でapp-containerが2つ利用されていますが、各々子コンポーネントの中身をdiv[slot]で設定しているものにしています。

<div id="js-app">
  <app>
  </app>
</div>
const layoutTpl = `
<div class="app-layout">
  <app-header></app-header>
  <app-container>
    <div slot="content1">こんにちは{{place}}</div>
    <div slot="content2">Try Everything!</div>
  </app-container>
  <app-container>
    <div slot="content1">こんにちは地球</div>
    <div slot="content2">Let it go!</div>
  </app-container>
</div>
`;

const headerTpl = `
<header>
  <p>テストサイトのヘッダー</p>
</header>
`;


const containerTpl = `
  <h1>コンテンツですよ</h1>
  <slot name="content1"></slot>
  <slot name="content2"></slot>
`;

Vue.component('app', {
  template: layoutTpl,
  data() {
    return {
      place: '世界'
    }
  }
})

Vue.component('app-header', {
  template: headerTpl
})

Vue.component('app-container', {
  template: containerTpl
})

new Vue({
  el: "#js-app"
});

実例
Vue.js slot - JSFiddle

そもそもslotとは?

Shadow Domを含んだWeb Componentsをあまり追っていなかったのですが、slotと言うのはW3Cのドラフトに載っている仕様のようですね。
ブラウザに実装されている生のAPIを触ってみたく調べてみたところ、実装されているブラウザはおそらくまだないようでした。

まとめ

今までslotを使わずに表示する内容をJSから渡していたのですが、これを利用するとかなり柔軟なコンポーネントを作ることができますね。