Vue----组件间传值与slot插槽
1.父组件给子组件传值
在父组件App.vue中定义属性,然后将属性传给子组件
2.子组件获取父组件传递过来的数据:props:{}
效果:
2.插槽slot
1.一般插槽
父组件
子组件
效果:
2.默认插槽
slot默认插槽中的默认值,如果调用的组件在调用此组件时没有传值,则显示被调用组件中定义的slot插槽默认值,如果调用组件有传值,则传的值会覆盖被调用组件中的默认slot值
1.调用组件不传值时:
调用组件:
被调用组件:
效果:
2.调用组件传值时:
调用组件:
被调用组件:
效果:
结论:调用组件传值,则会覆盖被调用组件插槽中的默认值;调用组件未传值,则显示的是被调用组件插槽的默认值。
3.命名插槽
调用组件:
或者缩写:
被调用组件:
效果:
插槽作用域:
下一篇:
MinIO(一):MinIO安装与使用