插槽
插槽
2023-09-11 14:22:18 时间
插槽 的作用是 可以控制 页面 的组成 也就是外卖可以通过 插槽 来显示页面的不同
<!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>
显示 :
相关文章
- 插槽slot
- 【视频】vue组件之slot插槽
- vue 中插槽共有几种,及插槽的作用
- Flutter之_slot 插槽属性详解
- Vue:插槽属性prop的使用示例
- Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】
- Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】(2022/8/30)
- 前端框架Vue------>第二天学习(1)插槽
- Vue3学习笔记(四)——组件、插槽、生命周期、Hooks
- [SSD固态硬盘协议 1] 插槽接口(M.2 / mSATA / SATA )、总线(PCIE / SATA )、传输协议(NVME / AHCI) 图解
- Vue 插槽 slot的简单实用
- Vue(九)http-proxy 跨域、插槽 slot
- 【Vue笔记】Vue中默认插槽slot、具名插槽slot、自定义组件的v-model属性的使用
- Vue3 组件定义与插槽
- Axios 异步通信、计算属性、插槽slot
- [SSD固态硬盘协议 1] 插槽接口(M.2 / mSATA / SATA )、总线(PCIE / SATA )、传输协议(NVME / AHCI) 图解