vue--组件机制--插槽slot

普通插槽

插槽允许我们在调用子组件的时候为子组件传递模板。

子组件
default
父组件
Your Profile

        当组件渲染的时候， 将会被替换为“Your Profile”。插槽内可以包含任何模板代码，甚至是其他组件。如果从函数的角度来理解，slot为形式参数，而navigation-link中的内容就为实参。Slot标签内部的内容为默认值，也就是当调用navigation-link组件的时候没有设置插槽内容，则组件插槽内容默认为default.

具名插槽

        在一个组件中有多个插槽，调用的时候为了给不同的组件传递参数就需要为插槽进行命名。

子组件

    

    

    

父组件

    

        传递到插槽中的模板可以封装到template标签中。从函数角度出发，具名插槽可以理解为是传递了多个不同参数。

作用域插槽

子组件
{{ user.lastName }}
        这里将user这个变量作为slot的一个参数进行绑定，目的是为了让父组件可以访问

父组件

    

        通过slotProps可以访问到绑定到插槽中的所有属性，除了使用slotProps接受所有的属性外，还可以通过解构形式获取从函数角度来理解，作用域插槽实际上为回调函数

缩写
与v-bind、v-on类似，v-slot也具有缩写形式，即把参数之前的所有内容 (v-slot:) 替换为字符 #。

例如 v-slot:header 可以被重写为 #header

插槽应用