超緊繃!30天Vue.js學習日記 極致廢話版的SLOT教學

大家好,今天要來介紹的是Vue中的插槽(slot),slot負責內容的分發,我們可以藉由它先把一個地方空出來,再把我們要的資料塞進去。
老實說在一開始看到說明後,我的第一個想法是:
那幹嘛不在一開始就把東西塞進去呢?
後來爬文才知道,若我們遇到一個問題:在一個元件中包含其他元件,需要利用樣板之間來傳遞資料。
像是這樣:

<my-component1>
<my-component2></my-component2>
<my-component3></my-component3>
</my-component1>

我可能在父組件<my-component1>設置了一些內容,想要在<my-component2>或是<my-component3>看到這些內容,這時候slot就可以派上用場啦!

簡單範例告訴你:

<div id="app">
<my-component1>
<my-component2></my-component2>
<my-component3>小明對小美說:你好!</my-component3>
</my-component1>
</div>
<script type="text/javascript">
Vue.component('my-component1', {
  template:
  '<div><h1>我是小明</h1>我想說什麼就說什麼<slot></slot></div>'
})
Vue.component('my-component2', {
  template:
  '<div><h1>我是小華</h1><slot>小明對我無話可說</slot></div>'
})
Vue.component('my-component3', {
  template:
  '<div><h1>我是小美</h1><slot>小明對我無話可說</slot></div>'
})
new Vue({
  el: '#app'
})
</script>

使用瀏覽器打開該範例之後,我們會發現,當父組件(小明)沒有留話給(小華),在模板中的小明對我無話可說才會被印出來,而小明對小美比較有興趣,向她打了聲招呼,完美的避免第一次見面的尷尬,我們家小明還真的是想說什麼就說什麼啊~

本日範例在此下載:

https://drive.google.com/open?id=1cBClpNt55B29oS5B7dev7IhlwMuLmmQF

溫馨提醒:上方說明有一半都是廢話,今天的介紹到這邊結束,我們明天見!