slot使用插槽分佈內容使用插槽分發內容

使用插槽分發內容

在使用組件時，我們常常要像這樣組合它們：

<app>
  <app-header></app-header>
  <app-footer></app-footer>
</app>

注意兩點： <app> 組件不知道它會收到什麼內容。這是由使用 <app> 的父組件決定的。 <app> 組件很可能有它自己的模板。 爲了讓組件可以組合，我們需要一種方式來混合父組件的內容與子組件自己的模板。這個過程被稱爲內容分發 (即 Angular 用戶熟知的“transclusion”)。Vue.js 實現了一個內容分發 API，參照了當前 Web Components 規範草案，使用特殊的 <slot> 元素作爲原始內容的插槽。 編譯作用域

在深入內容分發 API 之前，我們先明確內容在哪個作用域裏編譯。假定模板爲：

<child-component>
  {{ message }}
</child-component>