slot种类:
匿名插槽、具名插槽、作用域插槽
子组件ChildrenHasSlot.vue:
我是子组件ChildrenHasSlot.vue
我是默认值
我是chacaoB默认值
我是chacaoC默认值
我是chacaoD默认值
父组件ParentDemoSlot.vue
这是插入'默认'插槽的内容
这是插入插槽B的内容
这是插入插槽C的内容
{{slotProps}}
data1数据:{{slotProps.data1}}
data2数据:{{slotProps.data2}}
这是插入插槽D的内容
data1数据:{{data1}}
data2数据:{{data2}}
1. 匿名插槽:
子组件定义占位:
我是默认值
父组件使用:
方式1:
这是插入'默认'插槽的内容
等价于
方式2:defalut可以省略,加上只是为了更直观理解
这是插入'默认'插槽的内容
2. 具名插槽(有具体名字的插槽):
子组件定义占位:
我是chacaoB默认值
父组件使用:
这是插入插槽B的内容
3.作用域插槽(可从子组件插槽传值到父组件插槽使用处):
子组件定义占位:
我是chacaoC默认值
父组件使用:
这是插入插槽C的内容
{{slotProps}}
data1数据:{{slotProps.data1}}
data2数据:{{slotProps.data2}}
TIPS: slotProps的名字不是必须的指定的名称,可以DIY
当然也可以用ES6的解构出这些数据这样:
这是插入插槽D的内容
data1数据:{{data1}}
data2数据:{{data2}}
TIPS:slotProps代表子组件通过插槽传递的所有data数据,因为我们传递了2个分别是data1、data2,所以,slotProps是这样的:
{ "data1": { "a": 111, "b": 222 }, "data2": { "c": 333, "d": 444 } }
个人心得总结:
普通的父子组件关系是,子组件完成template内容的构成,通过v-bind和$emit完成父子数据通讯,并插入到父组件中显示
而插槽的作用是,赋予了父组件协助子组件完成template模块的功能,同时也出现了新的父子组件通讯方式