Vue----组件间传值与slot插槽

1.父组件给子组件传值

在父组件App.vue中定义属性,然后将属性传给子组件

2.子组件获取父组件传递过来的数据:props:{}

效果:

2.插槽slot

1.一般插槽

父组件

子组件

效果:

2.默认插槽

slot默认插槽中的默认值,如果调用的组件在调用此组件时没有传值,则显示被调用组件中定义的slot插槽默认值,如果调用组件有传值,则传的值会覆盖被调用组件中的默认slot值

1.调用组件不传值时:

调用组件:

被调用组件:

效果:

2.调用组件传值时:

调用组件:

被调用组件:

效果:

结论:调用组件传值,则会覆盖被调用组件插槽中的默认值;调用组件未传值,则显示的是被调用组件插槽的默认值。

3.命名插槽

调用组件:

或者缩写:

被调用组件:

效果:

插槽作用域:

经验分享 程序员 微信小程序 职场和发展