Vue内容分发slot(全面解析)

前端之家收集整理的这篇文章主要介绍了Vue内容分发slot(全面解析)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前面的话

为了让组件可以组合,需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 内容分发 (或 “transclusion” )。Vue实现了一个内容分发 API,参照了当前 Web 组件规范草案,使用特殊的 元素作为原始内容的插槽。本文将详细介绍Vue内容分发slot

编译作用域

在深入内容分发 API 之前,先明确内容在哪个作用域里编译。假定模板为

{{ message }}

message 应该绑定到父组件的数据,还是绑定到子组件的数据?答案是父组件。组件作用域简单地说是:父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译。

一个常见错误是试图在父组件模板内将一个指令绑定到子组件的属性/方法

假定someChildProperty是子组件的属性,上例不会如预期工作。父组件模板不应该知道子组件的状态

如果要绑定作用域内的指令到一个组件的根节点,应当在组件自己的模板上做:

',data: function () { return { someChildProperty: true } } })

类似地,分发内容是在父作用域内编译

默认丢弃

一般地,如果子组件模板不包含插口,父组件的内容将会被丢弃

父组件

测试内容

`,components: { 'child': childNode },};

如下图所示,所包含的

测试内容

被丢弃

匿名slot

当子组件模板只有一个没有属性的 slot 时,父组件整个内容片段将插入到 slot 所在的 DOM 位置,并替换掉 slot 标签本身

子组件

`,};
父组件

测试内容

`,};

如果出现多于1个的匿名slot,vue将报错

子组件

`,};

【默认值】

最初在标签中的任何内容都被视为

备用内容

,或者称为默认值。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容

当slot存在默认值,且父元素在中没有要插入的内容时,显示默认值

子组件

我是默认值

`,}; var parentNode = { template: `
父组件

`,};

当slot存在默认值,且父元素在中存在要插入的内容时,则显示设置值

子组件

我是默认值

`,}; var parentNode = { template: `
父组件

我是设置值

`,};

具名Slot

属性内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应特性的元素

子组件

`,};
父组件

`,};

仍然可以有一个匿名 slot,它是

默认 slot

,作为找不到匹配的内容片段的备用插槽。匿名slot只能作为没有slot属性的元素的插槽,有slot属性的元素如果没有配置slot,则会被抛弃

子组件

`,};
父组件

我是其他内容

`,};

我是其他内容

插入中,而

如果没有默认的 slot,这些找不到匹配的内容片段也将被抛弃

子组件

`,};

我是其他内容

作用域插槽

作用域插槽是一种特殊类型的插槽,用作使用一个 (能够传递数据到) 可重用模板替换已渲染元素。

在子组件中,只需将数据传递到插槽,就像将 props 传递给组件一样

在父级中,具有特殊属性 scope 的