這一篇主要是講slot。
我的另一篇在
另外文章開頭還是要說一下，這一篇文章借鑑了很多
這個博主寫的vue真的很好，包括畫的流程圖，示意圖都很好。
官網api的說法是：
注意兩點：
元件不知道它的掛載點會有什麼內容。掛載點的內容是由的父元件決定的。
元件很可能有它自己的模版。
為了讓元件可以組合，我們需要一種方式來混合父元件的內容與子元件自己的模板。這個過程被稱為 內容分發 (或 「transclusion」 如果你熟悉 angular)。vue.js 實現了乙個內容分發 api ，參照了當前 web元件規範草案，使用特殊的 元素作為原始內容的插槽。
先上乙個demo
my-component>
my-component>
div>
id="mycomponent">
class="content">
如果沒有分發內容，則顯示slot中的內容slot>
say something....p>
div>
template>
vue.component('my-component', )
new vue()
my-component>
my-component>
第二個中間沒有寫。
我們來看看執行結果：
也就是說，如果中間不寫分發內容的話，就會顯示slot中的內容（第二個component）。
用官方點的話來說，slot就是乙個插槽。感覺只要component中寫了東西，就不會顯示slot了
就是插在component中，但是顯示在什麼地方呢？
下面這行**在template中宣告了具名的插槽。
id="dialog-template">
class="dialogs">
class="dialog"
v-bind:class="">
class="dialog-content">
class="close rotate">
class="iconfont icon-close" @click="close">
span>
div>
name="header">
slot>
name="body">
slot>
name="footer">
slot>
div>
div>
class="dialog-overlay">
div>
div>
template>完整**，以及js
v-bind:show.sync="show">
class="dialog-header"
slot="header">
class="dialog-title">提示資訊h1>
header>
class="dialog-body"
slot="body">
你想在對話方塊中放什麼內容都可以！p>
你可以放一段文字，也可以放一些表單，或者是一些。p>
div>
class="dialog-footer"
slot="footer">
class="btn" @click="closedialog">關閉button>
footer>
modal-dialog>
class="btn btn-open" @click="opendialog">開啟對話方塊button>
div>
id="dialog-template">
class="dialogs">
class="dialog"
v-bind:class="">
class="dialog-content">
class="close rotate">
class="iconfont icon-close" @click="close">
span>
div>
name="header">
slot>
name="body">
slot>
name="footer">
slot>
div>
div>
class="dialog-overlay">
div>
div>
template>
body>
vue.component('modal-dialog',
}})new vue(,
methods: ,
closedialog: function
() }
})
v-bind:show.sync="show"
opendialog: function
() ,
closedialog: function
()
最後總結
感覺slot很適合用來作為頁面的布局，導航頭、內容、尾部導航。
vue高階元件
components commentslist.vue components blogpost.vue source.jsconst listeners const comments comment one comment two comment three comment four comment...
高階 vue 元件模式 6
之前的五篇文章中，switch元件一直是被視為內部元件存在的，細心的讀者應該會發現，這個元件除了幫我們提供開關的互動以外，還會根據當前toggle的開關狀態，為button元素增加aria expanded屬性，以aira開頭的屬性叫作內容增強屬性，它用於描述當前元素的某種特殊狀態，幫助殘障人士更好...
高階 Vue 元件模式 3
之前一篇文章中，我們雖然將toggle元件劃分為了toggle button toggle on和toggle off三個子元件，且一切執行良好，但是這裡面其實是存在一些問題的 如果熟悉 react 的讀者這裡可能馬上就會想到 hoc 高階元件 的概念，而且這也是 react 中乙個很常見的模式，該...