Vue元件化(槽口傳參)
阿新 • • 發佈：2018-12-11
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <script src="https://cdn.bootcss.com/axios/0.17.0/axios.js"></script> </head> <body> <div id="box"> <!-- 自定義的元件還是得在Vue的作用域裡才能生效哦 --> <quan-ju>這裡輸入的內容就是slot的內容,若模板內的slot標籤有內容,那麼這些輸入的內容就會直接被現在這裡的資訊覆蓋</quan-ju> <ju-bu>在自定義標籤內輸入了內容則不會顯示模板內的文字，顯示此文字</ju-bu> <juming> <!-- 對應網頁元素直接呼叫定義的具名槽口 --> <div slot="tou">具名槽口頭部填充值</div> <div slot="shen">具名槽口身體填充值</div> <div slot="jiao">具名槽口腳步填充值</div> </juming> </div> <!-- 自定義元件,一定要用網頁元素標籤包裹起來！全域性元件 --> <template id="tt"><div> <p>這是頭部</p> <p>這是尾部</p> <!-- 匿名插槽 --> <slot>slot的預設值</slot> </div></template> <!-- 自定義元件,區域性 --> <template id="tt2"><div> <p>這是區域性元件的頭部</p> <p>這是區域性元件的尾部</p> <slot>slot的預設值</slot> </div></template> <!-- 具名槽口 --> <template id="tt3"><div> <slot name="tou">頭部預設值</slot> <slot name="shen">身體預設值</slot> <slot name="jiao">腳步預設值</slot> </div></template> <script type="text/javascript"> //全域性元件 Vue.component("quanJu",{ template:"#tt" }); //區域性元件匿名插槽 var vm=new Vue({ el:"#box", components:{ "juBu":{ template:"#tt2", }, "juming":{ template:"#tt3" } } }); </script> </body> </html>