持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情

前言

今天在写代码时,发现一样的请求、一样的代码有些重复，代码冗余，便想着怎么减少代码量，我就先看它们发送请求、重复的代码文件，结果发现，它们的根文件都是相同的，那便想到了跨组件传值，脑海第一时间想到的就是 provide 和inject

毕竟只需要在祖先的文件下使用 provide，后面的哪个后代后代的文件需要这个值的话，就可以直接使用inject接收就行了

实现

祖先文件

// 第一种，直接以对象的方式定义,简单是简单,但是呢,它无法访问当前的this
// 传递静态数据的时候使用
// 使用方法

provide:{
  name:'测试  以对象的形式定义'
}

// 第二种,使用函数定义,它的话,就可以直接访问当前this可以传递动态数据
// 适用于绝大多数场景
// 使用方法

provide() {
  return {
    name:this.name
  }
},
data() {
  return {
    name:'name'
  }
}

后代文件

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

provide/inject跨组件传值

前言

实现

祖先文件

后代文件