当前位置：首页 > article >正文

vue2组件跨层级数据共享provide 和 inject

article 2024/12/3 22:36:53

在 Vue 2 中，provide 和 inject 的功能也是可以使用的，虽然在 Vue 3 中它们成为了组合式 API 的一部分。在 Vue 2 中，provide 和 inject 主要是用于祖先组件和后代组件之间的数据共享，而不是通过 props 和 emit 逐层传递。

Vue 2 中的 `provide` 和 `inject`

在 Vue 2 中，provide 和 inject 是 Vue 实例的一部分，可以在选项对象中的 data、methods、computed 或 created 等生命周期钩子中使用。

1. 祖先组件（提供数据）

在 Vue 2 中，祖先组件可以使用 provide 来提供数据。

// Parent.vue
export default {
  provide() {
    return {
      sharedData: 'Hello from parent' // 提供数据
    };
  },
  created() {
    console.log('Parent created');
  }
};

provide 返回一个对象，其中包含需要共享的数据。
可以通过 provide 共享任意数据，后代组件可以通过 inject 访问。

2. 后代组件（注入数据）

后代组件可以使用 inject 来接收祖先组件提供的数据。

// Child.vue
export default {
  inject: ['sharedData'], // 接收数据
  created() {
    console.log(this.sharedData); // 输出 "Hello from parent"
  }
};

inject 是一个数组，列出所有要接收的属性的名称。
通过 this.sharedData 可以访问从父组件提供的数据。

响应式数据

与 Vue 3 中的 provide 和 inject 类似，Vue 2 也支持响应式数据。如果需要响应式的数据共享，可以在祖先组件中使用 data 或 computed 来实现。

// Parent.vue
export default {
  provide() {
    return {
      sharedData: this.sharedData // 提供响应式数据
    };
  },
  data() {
    return {
      sharedData: 'Hello from parent'
    };
  }
};

后代组件中直接注入响应式数据：

// Child.vue
export default {
  inject: ['sharedData'],
  created() {
    console.log(this.sharedData); // 输出响应式数据 "Hello from parent"
  }
};

如果你在 data 中使用响应式数据（如 data()），provide 提供的是响应式的引用。
后代组件访问后，数据是响应式的，任何修改都会反映在祖先和后代组件中。

使用默认值

如果在 inject 时，指定的键在祖先组件中没有提供，可以给 inject 设置默认值。默认值可以是一个普通的值或一个函数：

// Parent.vue
export default {
  provide() {
    return {
      sharedData: 'Hello from parent'
    };
  }
};

// Child.vue
export default {
  inject: {
    sharedData: {
      default: 'Default Value' // 默认值
    }
  },
  created() {
    console.log(this.sharedData); // 如果没有找到父组件提供的数据，使用默认值
  }
};