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