- 插槽分发内容
- 插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如HTML、组件等，填充的内容会替换子组件的标签
- 以下的所有内容是基于vue版本 2.6.0 起
在一个 组件中：
>默认内容
父组件
提供的内容
具名插槽
【vue插槽slot （默认插槽 具名插槽 作用域插槽）】 元素有一个特殊的 属性：name。属性用来定义额外的插槽
name="header">标题
>主要内容放这里
不带 name 的 出口会带有隐含的名字“default”。 父组件在向具名插槽提供内容的时候，我们可以在一个 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称
标题内容
主要内容1
底部内容
作用域插槽
- 父组件对子组件的内容进行加工处理
- 父级模板里的所有内容都是在父级作用域中编译的；
- 子模板里的所有内容都是在子作用域中编译的
- 为了让 user在父级的插槽内容中可用，我们可以将user 作为 元素的一个 attribute 绑定上去
>
-bind:user="user">{{user.name}}
>
export default {
data () {
return {
user:{
name:'123',
}
}
}
}
父组件
{{ slotProps.user.name}}
//or 写法上可以采用默认插槽的缩写语法
{{ slotProps.user.name}}
>
import myslot from './myslot';
export default {
components: {
myslot
}
>
注意: 默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确：
多个插槽的情况 子组件
>
-bind:userData="https://www.it610.com/article/user" name="header">
{{ user.name }}
-bind:hobbyData="https://www.it610.com/article/hobby" name="footer">
{{ hobby.name }}
>
export default {
data () {
return {
user:{
name: '1234',
},
hobby:{
tel: "6789",
}
}
}
}
>
父组件
{{ slotProps.userData.name }}
{{ slotProps.hobbyData.tel}}
>
import myslot from './myslot';
export default {
components: {
myslot
}
>
针对多个插槽的情况，在写法上可以解构插槽prop，父组件的写法如下
{{ userData.name}}
{{ hobbyData.tel }}
>
import myslot from './myslot';
export default {
components: {
myslot
}
}
>
参考:http://caibaojian.com/vue-slot.html
推荐阅读
- Vue2.x|Vue —— Axios 发送请求（常用格式）
- #|[vue] slot插槽 默认插槽，具名插槽，作用域插槽
- vue|vue插槽、具名插槽和作用域插槽
- vue(十八)——vue中插槽(slot)默认插槽，具名插槽、作用域插槽
- vue|vue中v-slot详解，具名插槽和作用域插槽
- vue|Element-UI默认样式改不了（怎么办）
- vue.js|vue基础入门之侦听器、计算属性、vue-cli、vue组件
- springboot|Springboot+Vue+Element实现的CRM管理系统
- java进阶-框架篇|springboot + VUE实现后台管理系统(集成JWT接口权限验证)