VUE之插槽的理解和使用

插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，默认情况下组件内部包裹的内容是不会显示的，如果需要进行显示则需要通过插槽来进行显示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。

匿名插槽：

            v-slot 后面没有名字
            在组件内部通过进行接收

子组件中占位

image.png

在父组件中给这个占位符填充内容：

具名插槽：

一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。
v-slot:插槽的名称
在组件内部通过进行接收
子组件插槽

image.png

父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中

image.png

插槽作用域：

常用的一种子传父的通信方式，作用域插槽其实就是带数据的插槽，即带参数的插槽，简单的来说就是子组件提供给父组件的参数，该参数仅限于插槽中使用，父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。

语法：v-slot:插槽名称(可选 如果不写默认是default) = "变量(这个变量是一个对象)"

作用：让组件来提供自身需要显示的内容
子组件：

image.png

父组件:

image.png