vue slot插槽
来源:互联网 发布:js 两个数组对比去重 编辑:程序博客网 时间:2024/05/18 01:45
vue编辑作用域
- 父组件模版的内容在父组件作用域内编译,子组件模版的内容在子组件作用域内编译。
- 父组件模板并不感知子组件的状态。
vue单个插槽
- 除非子组件模板包含至少一个 插口,否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的插槽时,父组件传入的整个内容片段将插入到插槽所在的 DOM 位置,并替换掉插槽标签本身。
- 最初在 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。
什么是vue的内容分发
- 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板。
具名插槽
- 子组件使用slot标签规定父组件模版内容插放的位置
- 子组件通过name特性的值与父组件模版内容slot特性的值相关联
实现的目的:将父组件模版内容(内容必须在开闭标签内)插到子组件模版的指定位置,
子组件模版内容<div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer></div>
父组件模版内容<app-layout> <h1 slot="header">这里可能是一个页面标题</h1> <p>主要内容的一个段落。</p> <p>另一个主要段落。</p> <p slot="footer">这里有一些联系信息</p></app-layout>
渲染结果<div class="container"> <header> <h1>这里可能是一个页面标题</h1> </header> <main> <p>主要内容的一个段落。</p> <p>另一个主要段落。</p> </main> <footer> <p>这里有一些联系信息</p> </footer></div>
作用域插槽
阅读全文
0 0
- vue slot插槽
- vue 插槽slot
- vue slot插槽的使用
- vue动态组件和slot插槽
- Vue——Slot(插槽)
- vue slot插槽的小技巧
- vue使用插槽分发内容slot的用法
- R-什么是slot插槽?
- Vue 插槽分发内容
- vue的匿名插槽
- vue的实名插槽
- Vue使用具名插槽细节
- Vue Slot用法
- vue笔记--------slot
- Vue组件中的slot
- vue里面的slot
- vue slot内容分发
- vue slot 内容分发
- SpringBoot构建微服务实战 之 @Enable*
- SM框架——详细整合教程(Spring+SpringMVC+MyBatis)
- 隔板分球问题
- 用Linux服务器实现每天定时自动备份交换机配置文件
- C 数据类型大小
- vue slot插槽
- 机器学习之逻辑回归 Logistic Regression(二)Python实现
- oracle优化
- html javascript css写简易计算器
- 改变spring-boot中端口号的三种方式
- mac 安装互联网下载的软件显示。已损坏,请扔到废纸篓
- 提交表单
- php微信公众平台接口(五)——微信网页授权
- MySQL基础操作之对数据库和表的增删改查