插槽 的作用是 可以控制 页面 的组成 也就是外卖可以通过 插槽 来显示页面的不同
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lesson 20</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // slot 插槽 // slot 中使用的数据，作用域的问题 // 父模版里调用的数据属性，使用的都是父模版里的数据 // 子模版里调用的数据属性，使用的都是子模版里的数据 // 具名插槽 const app = Vue.createApp({ template: ` <layout> <template v-slot:header> <div>header</div> </template> <template v-slot:footer> <div>footer</div> </template> </layout> ` }); app.component('layout', { template: ` <div> <slot name="header"> 1111111111111 </slot> <div>content</div> <slot name="footer"></slot> </div> ` }); const vm = app.mount('#root'); </script> </html>
当我们 在 slot name="header" 命名 name 的 时候 我们这个 部分就会被 插槽 的内容所替换 如下
当不命名的时候 不被替换 slot 为 div div 下如果有显示 就显示 div 下的内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lesson 20</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // slot 插槽 // slot 中使用的数据，作用域的问题 // 父模版里调用的数据属性，使用的都是父模版里的数据 // 子模版里调用的数据属性，使用的都是子模版里的数据 // 具名插槽 const app = Vue.createApp({ template: ` <layout> <template v-slot:header> <div>header</div> </template> <template v-slot:footer> <div>footer</div> </template> </layout> ` }); app.component('layout', { template: ` <div> <slot> 1111111111111 </slot> <div>content</div> <slot name="footer"></slot> </div> ` }); const vm = app.mount('#root'); </script> </html>
显示 ：
