Vue中父子组件，爷孙组件传值

1. 父组件向子组件传值

步骤： 父组件中引入子组件、调用子组件并引用、在引用的标签上给子组件传值。

定义parent.vue父组件，向子组件传值

子组件通过props来接受父组件传过来的值
定义child.vue子组件，并接收父组件传过来的值

结果如下图

image.png

2. 爷孙组件传值

通过 provide / inject来进行爷孙组件的传值

建立grandSon.vue孙子文件,添加provide属性

  provide: {
    foo: "爷爷传递的 "
  },

修改parent组件如下

建立grandSon.vue文件,通过inject接收爷爷传过来的值

子组件 child.vue中引入grandSon.vue，child.vue最终如下

最终效果如下

image.png