使用slot分发内容

Posted 2020-10-05 半夏微澜ぺ

为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件的模板。这个过程被称为 内容分发

使用特殊的<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 是最通用的 使用约定。