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"
});