vue2 provide computed的值

在Vue.js 2.x版本中，`provide` 和 `inject` 是单向数据流中用于组件间通信的重要特性，尤其适用于深层嵌套组件之间的状态共享。当你在一个组件（通常是父组件）中使用 `provide` 提供一个键值对，你可以通过这个键在任何一个使用 `inject` 的孙子级及以下的后代组件中访问到该值。

`computed` 结合 `provide` 可以创建动态计算的提供值。例如：

// 父组件
export default {
  data() {
    return {
      parentValue: 'parent'
    };
  },
  computed: {
    providedValue: {
      get() {
        // 计算并返回提供的值
        return this.parentValue + '_computed';
      }
    }
  },
  provide() {
    // 将 computed 对象暴露出去
    return { providedValue };
  }
}

在子组件中，你可以像这样使用它：

<template>
  <div>{{ providedValue }}</div>
</template>

<script>
import { inject } from 'vue';

export default {
  name: 'ChildComponent',
  created() {
    // 使用 inject 获取提供的值
    this.$root.$on('updateProvidedValue', this.updateProvidedValue);
  },
  methods: {
    updateProvidedValue(newValue) {
      this.providedValue = newValue;
    }
  },
  mounted() {
    console.log(this.providedValue); // 输出：'parent_computed'
  },
  beforeDestroy() {
    this.$root.$off('updateProvidedValue');
  }
}
</script>