vue组件内容分发
2018-04-11 本文已影响5人
iqing2012
- 如果子组件没有
<slot></slot>,在父组件里的内容将会被丢弃。 - 如果在父组件里的
<child inline-template></child>,则会把child包含的父组件里的内容当做自己的模板。 - 当子组件模板只有一个没有属性的 slot 时,父组件整个内容片段将插入到 slot 所在位置。
- 当slot存在默认值，且父元素在<child>中没有要插入的内容时，显示默认值
- 当slot存在默认值,且父元素在<child>中存在要插入的内容时,则显示设置值
- <slot> 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素
- 作用域插槽
作用域插槽是一种特殊类型的插槽，用作使用一个 (能够传递数据到) 可重用模板替换已渲染元素。 在子组件中，只需将数据传递到插槽，就像将 props 传递给组件一样
在父级中，具有特殊属性 scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。scope 的值对应一个临时变量名，此变量接收从子组件中传递的 props 对象
