OO第一單元實驗總結報告
阿新 • • 發佈：2022-03-24
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src='lib/vue.js'></script> </head> <body> <div id="box"> <!-- 當前元件或者節點 在哪個模板中，就能訪問哪個模板狀態 --> <child> <div slot="a">11111111111111</div> <div slot="b">22222222222222</div> <div slot="c">33333333333333</div> <div>44444444444444</div> </child> <navbar> <button slot="left">aaa</button> <i class="iconfont icon-all" slot="right">字型圖示</i> </navbar> </div> <script> // 插槽的意義 ： 擴充套件元件能力， 提高元件的複用性 Vue.component("navbar",{ template:` <div> <slot name="left"></slot> <span>navbar</span> <slot name="right"></slot> </div> ` }) // 單個插槽， <slot></slot> // 具名插槽 <slot name="a"></slot> Vue.component("child",{ template:` <div> child <slot name="a"></slot> <slot name="b"></slot> <slot name="c"></slot> <slot></slot> </div> ` }) new Vue({ el:"#box" }) </script> </body> </html>