html标签slot,webpack学习笔记-深入组件(插槽slot)

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。

它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性。新语法的由来可查阅这份 RFC。

插槽内容:文字,html片段，其他组件，如果没有 插槽，那么其中的任何内容都会被扔掉

//组件内容

Your Profile这样渲染成

//其他任何模板代码

Your Profile

Your Profile

编译作用域:本页面的作用域，不能访问navigation-link内部作用域

父级模板里的所有内容都是在父级作用域中编译的；

子模板里的所有内容都是在子作用域中编译的。

Loggedin as{{ user.name }} //user 指向本页面作用域

后备内容:组件默认数据，你不传给我东西，我就展示自己数据！

有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。组件插槽

Submit

具名插槽：

组件

1:一个不带 name 的  出口会带有隐含的名字“default”。

2:在向具名插槽提供内容，用template v-slot

3：注意 v-slot 只能添加在一个  上

Here might be a page title

A paragraph for the main content.

And another one.

Here‘s some contact info

Here might be a page title

A paragraph for the main content.

And another one.

Here‘s some contact info

作用域插槽：让插槽内容能够访问子组件中才有的数据

有时让插槽内容能够访问子组件中才有的数据是很有用的

只有  组件内可以访问到 user 而我们提供的内容是在父级渲染的。

绑定在  元素上的特性被称为插槽 prop。现在在父级作用域中，我们可以给 v-slot 带一个值来定义我们提供的插槽 prop 的名字：

独占默认插槽的缩写语法:

这种写法还可以更简单。就像假定未指明的内容对应默认插槽一样，不带参数的 v-slot 被假定对应默认插槽

注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确：

{{ slotProps.user.firstName }}

{{ slotProps.user.firstName }}

出现多个插槽，请为所有插槽使用完这个的template语法

{{ slotProps.user.firstName }}

...

解构插槽 Prop：作用域插槽组件数据传递出来,内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里

这个地方看得有点蒙圈！

function (slotProps) {//插槽内容

}

动态插槽名：

...

具名插槽的缩写：v-slot:header  缩写为#header,必须有name

Here might be a page title

A paragraph for the main content.

And another one.

Here‘s some contact info

该缩写只在其有参数的时候才可用。这意味着以下语法是无效的

{{ user.firstName }}

{{ user.firstName }}

原文：https://www.cnblogs.com/liuguiqian/p/11023734.html