Keep Learning Vuejs 2.0 通過slot來分配內容
上面我們講的都是通過屬性來進行組件交流。現在我們通過標籤體來溝通，在VUE中使用slot來處理。
ok, 我們來看一個簡單的例子， 你就會明白slot的作用 在子組件中， 我們加入一個slot標籤，slot默認一個內容
默認情況下
父組件中，我們來這麼調用
新聞播報
渲染後的結果
如果hello中沒有內容體， 則默認情況下顯示，子組件默認的數據
同樣我們可以為slot命名， 這樣來定位內容 例如：
導航 默認情況下
父組件中，我們來這麼調用
首頁 新聞播報
我們還可以在父組件中獲取子組件的臨時定義屬性。
子組件
文本默認內容
父組件
{}
渲染效果為
理解這個後， 我們來看一個循環例子
在子組件中， 我們設定一個items數組，然後綁定到slot
文本默認內容
exportdefault{
name: hello ,
data() {
return{items:["1","2","3"]}
}
}
父組件
{}
結果顯示為：
待續........
我們稍微推廣一下自己:
我們正在做 "高手計劃", 著重培養喜歡學習前端技術的人員, 成為WEB前端開發工程師. 我們的目標的是培養高級前端開發者. 對以後的工作沒有壓力, 提高自己在社會的競爭力, 解決問題的能力.
需要提升自己的歡迎入
官網: https://www.gaoshoujihua.com
歡迎大家傳播與分享
TAG:編程的人 |