vue中多层嵌套组件父子孙组件传参

provide/inject

首先搭建脚手架，我这里使用vue2.6.11

父组件father.vue
子组件child1.vue
孙子组件child2.vue
三者是层层嵌套关系

父组件father.vue

<template>
  <div>
    父组件
    <child1></child1>
  </div>
</template>
<script>
import child1 from "./child1";

export default {
  name: "fatherProvide",
  components: {
    child1,
  },
  provide: {
    // 父组件用provide提供传参
    uname: "父组件传递的uname",
  },
  data() {
    return {};
  },
};
</script>

子组件child1.vue

<template>
  <div>
    子组件接收的数据：{{uname}}
    <child2></child2>
  </div>
</template>
<script>
import child2 from "./child2";

export default {
  name: "childInject1",
  components: {
    child2,
  },
  data() {
    return {};
  },
  inject: ["uname"]
};
</script>

孙子组件child2.vue

<template>
  <div>
    孙子组件接收的数据：{{foo}}
    <p>{{arr}}-{{typeof(arr)}}</p>
  </div>
</template>
<script>
export default {
  name: "childInject2",
  data() {
    return {
      // uname:this.uname
    };
  },
  inject: {
    foo: {
      //可以换名字
      from: "uname", //从其父组件获取的属性名
      default: "foo", //2.5.0+可使用default，就像props那样，可以设置默认值，变成可选项
    },
    arr: {
      from: "arr", //没有接收到就显示默认值
      default: () => [1, 2, 3, 4, 5],
    },
  }
};
</script>

执行结果