vue 组件传值provide与inject

vue 组件传值provide和inject

应用场景

　　当组件嵌套的层级过多时，通过prop将父组件的属性层层传递给后代组件，明显是繁琐而又低效的，vue提供了provide和inject，能够将父组件中的属性直接让所有后代组件访问到

与$parent相比用什么好处

　　1.不用暴露整个parent组件实例对象

　　2.可以渗透到多个层级的组件，只要是后代组件都可以获取，而$parent只能是直系后代获取，多个层级后代组件就只能$parent.$parent...

一些问题

　　在子组件中vue仍然像props一样不允许子组件直接修改inject中的项的值

代码示例

　　父级中的provide定义语法

  //第一种，直接以对象的方式定义
  //优点：方便
  //缺点：无法访问当前的this
  //适用场景:传递静态数据
  provide: {
    test: "测试 定义方式1 以对象的形式定义",
  },
  //第二种，使用工厂函数定义
  //优点：能够直接访问当前this可以传递动态数据
  //适用场景: 适用与绝大多数场景，除非你传递的数据全部都是静态数据
  provide() {
    return {
      test: this.test,
    };
  },
  data() {
    return {
      test: "test",
    };
  },

　　子组件使用inject接收

 

<template>
  <div class="index">
    <!-- 像使用data中的熟悉一样使用inject属性 -->
    <div class="">我是children==={{ test }}</div>
    <subw></subw>
  </div>
</template>

<script>
import subw from "./sub.vue";
export default {
  components: { subw },
  //第一种方式:直接使用数组形式接收
  //缺点：不能定义默认值，inject中定义的字段，父组件provide中就必须要定义，否则就会报错
  inject: ["test"],
  //第二种：使用对象的方式
  //优点：能够定义默认属性，定义默认属性之后，即便父组件中没有在provide定义对应的属性,vue也会认为它是合法的，在使用时会自动使用默认属性
  inject: {
    test: {
      //你可以直接这样定义一个基本类型的值作为默认值
      default: "parent prov",
      //如果你想使用引用类型的值作为默认值的话，那么你就要定义一个工厂函数来返回他
      default: () => {
        //一个数组作为默认值
        return new Array();
        //一个object作为默认值
        return new Object();
        //一个方法作为默认值
        return function () {};
      },
      //如果父组件的provide定义的属性字段为test，而子组件中data存在一个test字段，
      //此时子组件再将inject的接收字段定义为test的话。调用this.test就会出现冲突，所以子组件inject中可以定义与provide中不同的字段来接收，只需要将from接收来源指定为provide中的目标字段即可
      from: "test2",
    },
  },
  created() {
    //  像使用data中的熟悉一样使用inject属性
    console.log(this.test);
  },
};
</script>