• 总结/笔记-vue中的插槽(默认插槽、具名插槽、作用域插槽)


    问题:

    遇到了一个插槽,写法为 #default = ”{ row }“

    插槽知识点:

    定义

    插槽,用于 在组件中 引用外部组件或自定义组件的内容。

    子组件中提供给父组件使用的一个占位符,父组件可以在这个占位符中填充任何模板代码,填充的内容会替换子组件的标签。插槽的显不显示、如何显示是由父组件控制,插槽在哪显示子组件控制。

    1. 默认插槽

    v-slot:default#default,可省(name属性可以不写,即未定义名字的插槽

    数据流:父组件 -> 子组件

    例:引用子组件时,在子组件中插入一段内容,代码如下

    父组件中的传入要插到子组件的内容

    2. 具名插槽

    具名插槽,即 给插槽起名,给定义一个name属性。

    数据流:父组件 -> 子组件

    作用:一个子组件可以放个插槽,父组件填充内容时,根据名字把内容填充到对应插槽中。

    父组件 可以用 v-slot:name #name 往插槽中填充内容。

    #插槽名  v-slot:插槽名 的简写形式

    例子:

    3. 作用域插槽

    作用域插槽:带数据的插槽,即带参数的插槽。子组件提供给父组件参数,该参数仅限于插槽中使用,父组件可以根据子组件传过来的插槽数据 来进行不同方式的展示/填充插槽内容。

    父组件通过 v-slot: 属性名 = “slotProps” 的slotProps(接受的变量)来获取子组件传出的属性,子组件中通过来传递子组件的数据,数据存于 值 中

    数据流:子组件 -> 父组件

    适用场景:在父组件中访问子组件的数据;子组件的某部分数据,每个父组件都有不同方式/样式的呈现形式。

    例子:

    上使用 v-bind绑定了 vue data 中的定义的数据。

    总结与拓展:

    1. slot 存在于 子组件,v-slot 在父组件,最终页面展示结果是父组件。

    2. 可以通过解构获取 v-slot = { user },也可重命名 v-slot = “{ user: newName }” 和定义默认值 v-slot = “{ user = '默认值' }”

    3. 插槽名 可以动态变化的 v-slot: [slotName]

    注:

    1. 默认插槽 dafault,可以省略default 直接写 v-slot,缩写为#时不能不写参数,要写成#default

    2. 多个插槽混用时,v-slot不能省略default

    软件开发原则:多扩展,少修改。

    v-slot插槽的位置:

    更推荐 将插槽 v-slot 写在