【Vue】vue2.6插槽slot使用详解（更新v-slot用法总结）
vue2.6插槽slot使用详解（更新v-slot用法总结）
在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 (即
v-slot指令)。
它取代了slot和slot-scope这两个目前已被废弃但未被移除且仍在文档中的attribute。
一、 插槽简介
Vue 实现了一套内容分发的 API，即：将
插槽作用： 父页面在组件标签内插入任意内容,子组件内插槽slot控制摆放位置(匿名插槽,具名插槽)。
插槽分类（共三类）:
- 匿名插槽(也叫默认插槽): 没有命名,有且只有一个
- 具名插槽: 相对匿名插槽组件slot标签带name命名的
- 作用域插槽: 子组件内数据可以被父页面拿到(解决了数据只能从父页面传递给子组件的问题)
二、插槽的使用
2.1 匿名插槽
规则：
默认值
2.2 具名插槽
规则：
2.3 匿名与具名插槽的使用
注意 v-slot 只能添加在上 (只有一种例外情况)，这一点和已经废弃的 attribute 不同。
定义插槽 base-layout.vue
有时我们需要多个插槽。例如对于一个带有如下模板的 组件：
使用插槽：
在向具名插槽提供内容的时候，我们可以在一个 元素上使用 v-slot 指令，并以v-slot的参数的形式提供其名称：
我是头部header
未指定的内容默认归结为匿名插槽内容1
未指定的内容默认归结为匿名插槽内容2我是尾部footer
现在元素中的所有内容都将会被传入相应的插槽。
任何没有被包裹在带有 v-slot 的 中的内容都会被视为默认插槽的内容。
最后页面显示如下
我是头部header
未指定的内容默认归结为匿名插槽内容1
未指定的内容默认归结为匿名插槽内容2
我是尾部footer
2.4. 作用域插槽
自 2.6.0 起有所更新。已废弃的使用
slot-scopeattribute 的语法在这里。
规则：
子组件
{{ user.lastName }} data() {return {user:{lastName:"张",firstName:"三"},test:[1,2,3,4]}},
// {{ user.lastName }}是默认数据 v-slot:todo 当父页面没有(="slotProps")时显示： 张
父页面
重点是slotProps接取子组件里:user="user" :test="test"类似属性的数据
{{slotProps.user.firstName}}
//slotProps 可以随意命名
//slotProps 接取的是子组件标签slot上属性数据的集合所有v-bind:user="user"最后显示
三
2.4.1 解构插槽Prop
这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候。
父组件：
// 相当于
function (slotProps) {// 插槽内容
}
(slotProps)=>参数可以用slot标签上现有的值({user,test})替换
{{user.firstName}} //此处原来需要写为{{slotProps.user.firstName}}
## 显示 ##
## // yue
子组件：
{{ user.lastName }}
data() {return {user:{lastName:"Zhang",firstName:"yue"},test:[1,2,3,4]}},## 显示 ##
// yue
参数值替换名字
{{person.firstName}}
// v-slot:[dynamicSlotName]="{user:person,test}
## 显示 ##
## // yue
注意v-slot只能添加在上，只有一种例外情况，如下：独占默认插槽（当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用）
2.4.2 独占默认插槽
当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用
父组件：
//原本是需要写template
{{slotProps.user.firstName}}
{{slotProps.user.firstName}}
//或者简写
{{slotProps.user.firstName}}
子组件：
{{ user.lastName }}
data() {return {user:{lastName:"Zhang",firstName:"yue"},test:[1,2,3,4]}},
## 显示 ##
// yue
2.5 缩写形式
跟v-on和v-bind一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。
例如: v-slot:header 可以被重写为#header
使用插槽
我是头部header
未指定的内容默认归结为匿名插槽内容1
未指定的内容默认归结为匿名插槽内容2我是尾部footer
三、插槽示例
3.1 todo-list实例
父页面
新插槽 v-slot 代替具名插槽 作用于插槽 {{list.text}}
子组件
{{ todo.text }}
3.2 实际使用示例
title是插槽名，插入的内容是node
老写法
{{ node.label }}
新写法
{{ node.label }}
四、总结
在用上v-slot之后 只需要考虑好
- 是否需要命名(匿名插槽,具名插槽)
- 父页面是否需要取存在子页面的数据(作用域插槽)
标签：
相关文章
-
无相关信息