單個插槽及具名插槽理解
阿新 • • 發佈：2019-02-08
插槽就是動態互動父子元件之間的資料的機器臂，二話不說上程式碼：
理解：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript" src="vue.js"></script> </head> <body> <div id="app"> <div> <h1>我是你爸比</h1> <my-component> <p>哈哈哈哈，我是爸比的金庫 </p> <p>(●ˇ∀ˇ●)，爸比愛你</p> </my-component> </div> </div> <script> Vue.component("my-component",{ template:"\ <div>\ <h2>我是爸比的傻兒子</h2>\ <slot>\ 兒子出生的時候嘴巴里含著玉，假如爸比是丐幫幫主此玉就會靈光一現\ </slot>\ </div>\ ", }); new Vue({ el:"#app" }) </script> </body> </html>
1.假如子元件沒有slot插槽，父元件的內容將被會丟棄
2.假如子元件只有一個插槽，並且這個slot沒有屬性，那麼父元件的所有包含在自定義元件標籤裡面的內容將插入到slot所在的位置，slot標籤消失
3.假如自定義元件標籤裡面沒有內容，就會顯示slot裡面的備用內容
vUv
~~~~~~~略略略~~~~~~~~~
具名插槽demo：
理解就是每個slot要找到對應自己的name的同類，不能認錯了族群，假如從石頭裡蹦出來的不知道自己name的那位，就會被愛心收容所接納，假如沒有這個機構的話，就不會出現。ok就這樣。<div id="app"> <h1>商場裡面的商品</h1> <girl> <li slot='shoes'>紅色的鞋\綠色的鞋\不紅不綠的鞋</li> <li slot='skits'>冬天穿的裙\夏天穿的裙\睡覺穿的裙</li> <li slot='makeup'>眼睛用的霜\每個季節不同的口紅\白天黑夜分開的水</li> <li>總之當一個漂亮的美少女很麻煩，所以各位好好疼愛手心的那個美女，不說了我是預設的心聲因為我沒有slot的name名字，找不到name的那個人就要顯示我，請大家記住我是沒有名字的雷鋒，OvO</li> </girl> </div> <script> Vue.component('girl',{ template:'\ <h2>家裡已經放不下~放不下~放不下的小心肝兒</h2>\ <ul>\ <li>\ 高跟鞋\平底鞋\登山鞋\坡跟鞋\運動鞋\瑪麗珍鞋\如此云云\ <slot name="shoes"></slot>\ </li>\ <li>\ 長裙\迷你裙\牛仔裙\連身裙\薄紗裙\如此云云\ <slot name="skits"></slot>\ </li>\ <li>\ 口紅\粉底\隔離\防晒\腮紅\眼影\如此云云\ <slot name="makeup"></slot>\ </li>\ <li>\ <slot></slot>\ </li>\ </ul>\ ', }) </script>
哈哈 ， 放學咯