使用slot分发内容 作用域插槽
2024-08-30 15:43:33
除非子组件模板包含至少一个<slot>插口,否则父组件的内容将会别丢弃。当子组件模板只有一个没有属性的slot时,父组件整个内容片断将插入到slot所在的DOM位置,并替换掉slot标签本身。
最初在 <slot>
标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。
作用域插槽是一种特殊类型的插槽,用作使用一个(能够传递数据到)可重用模板替换已渲染元素。
在子组件中,只需将数据传递到插槽,就像你将 prop 传递给组件一样:
在父级中,具有特殊属性scope的<template>元素,表示它是作用域插槽的模板,scope的值对应一个临时变量名,此变量接受从子组件传递的prop对象
demo:
var app=new Vue({ el:'#app', components:{ 'scope-component2':{
template:'<div><p>this is a child</p><slot text="this info from child"></slot></div>' } }
});
html
<scope-component2>
<template scope="props">
<p>{{props.text}}</p>
</template>
</scope-component2>
最新文章
- iOS使用Zbar扫描二维码
- Linux命令總結
- winform 对话框,保存,另存为,还有打印控件
- Linux系统信息查看命令大全
- Longest Common Subsequence
- win7,ubuntu双系统——重装win7后如何恢复ubuntu引导
- MFC 颜色选择对话框、颜色按钮
- Servlet主要的作用
- short-path problem (Spfa) 分类: ACM TYPE 2014-09-02 00:30 103人阅读 评论(0) 收藏
- 使用Visual Leak Detector检测内存泄漏[转]
- 【Nginx 1】Nginx 的下载和安装
- CentOS6.3 Firefox安装FlashPlayer
- Android Fragment与Activity之间的数据交换(Fragment从Activity获取数据)
- 用来代替本机IP的万能IP:127.0.0.1
- uoj#179 线性规划
- Chrome浏览器读写系统剪切板
- Re-enable extensions not coming from Chrome Web Store on Chrome v35+ (with enhanced security)
- flex布局嵌套之高度自适应
- 在浏览器中高效使用JavaScript module(模块)
- Android : Error inflating class android.support.design.widget.NavigationView
热门文章
- 【二分图匹配】E. 过山车
- 【并查集】F.find the most comfortable road
- Linux(4):文件属性
- 【Educational Codeforces Round 48】
- .NET Core windows开发环境 + Git代码控管 + Docker 部署环境搭建
- POJ 1144 割点
- 黑黛增发罗林川:如何三年开1000家连锁店?_深度案例_i黑马
- HDTVI,HDCVI
- HDU 5280 Senior&;#39;s Array
- Objective-c写冒泡排序