使用slot分发内容
为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件的模板。这个过程被称为 内容分发
使用特殊的<slot>元素作为原始内容的插槽
除非子组件模板包含至少一个<slot>插口,否则父组件的内容将会被丢弃。当子组件只有一个没有属性的slot时,父组件整个内容片断将插入到slot所在DOM位置,并替换掉slot标签本身。
最初在<slot>标签中的任何内容都被视为 备用内容。备用内容在子组件的作用域内编译。并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。
具名 Slot
<slot> 元素可以用一个特殊的属性 name来配置如何分发内容。多个slot可以用不同的名字。具名slot将匹配内容片断中有对应slot特性的元素。
仍然可以有一个匿名 slot,它是默认 slot,作为找不到匹配的内容片段的备用插槽。如果没有默认的 slot,这些找不到匹配的内容片段将被抛弃。
子组件索引
尽管有props和events,但是有时任然需要在javascript中直接访问子组件。为此可以使用ref为子组件指定一个索引ID,
<div id="parent">
<user-profile ref="profile"></user-profile>
</div>
var parent=new Vue({el:'#parent'});
var child=parent.$refs.profile,
当 ref 和v-for一起使用时,ref是一个数组,包含相应的子组件。
$refs
只在组件渲染完成后才填充,并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案——应当避免在模板或计算属性中使用 $refs
。
这意味着 PascalCase 是最通用的 声明约定 而 kebab-case 是最通用的 使用约定。
最新文章
- Android笔记——SQLiteOpenHelper类
- TypeScript &; JavaScript
- Windows Azure Virtual Machine (32) 如何在Windows操作系统配置SFTP
- 自定义JSTL标签和函数库
- ionic 运行过程中动态切换API服务器地址
- java 数组初始化
- 一小时搞定DIV+CSS布局-固定页面开度布局
- opencv for python
- DOM操作表格——HTML DOM
- 二分查找c++简单模板
- 2015 Multi-University Training Contest 4 Walk Out
- 某集团BI决策系统建设方案分享
- Java枚举:小小enum,优雅而干净
- 2059 - Authentication plugin &#39;caching_sha2_password&#39; cannot be loaded: dlopen(../Frameworks/caching_sha2_password.so, 2): image not found
- Oracle 用户权限 Grant
- Accumulator<;Long>; implements of JavaSparkContext in Spark1.x
- CentOS 7.5 安装KVM虚拟机(Windows)
- 这篇说的是Unity Input 输入控制器
- FreeOpcUa compile
- vs2013和vs2010的配置
热门文章
- 使用systemtap调试Linux内核 :www.lenky.info
- 【postgresql】postgresql中的between and以及日期的使用
- How to Install a Language Pack
- Javascript:如何调用全局变量?
- Building a Radio Listening Station to Decode Digital Audio &; Police Dispatches
- Linux多线程实例 定时重启httpd和mysqld
- Linux系统调用(syscall)原理(转)
- Sublime Text使用
- Ubuntuserver版安装
- no matching provisioning profiles found