Vue.js slot sample 6

ヘッダー {{ p.text }}

佐藤

フッター {{ p.text }}

<div id="app">
  <my-name>
    <h1 slot="header" slot-scope="p">ヘッダー {{ p.text }}</h1>
    <strong>佐藤</strong>
    <h2 slot="footer" slot-scope="p">フッター {{ p.text }}</h2>
  </my-name>
</div>
Vue.component('my-name', {
  template: `
私の名前は鈴木です。
` }); new Vue({ el: '#app' });