从VueJS中的子组件获取父计算函数的值

<template>
  <div>
    <child-component :parentValue="computedValue"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 10
    };
  },
  computed: {
    computedValue() {
      return this.value * 2;
    }
  }
};
</script>

<template>
  <div>
    <p>父组件计算属性的值：{{ parentValue }}</p>
  </div>
</template>

<script>
export default {
  props: {
    parentValue: {
      type: Number,
      required: true
    }
  }
};
</script>

<template>
  <div>
    <p>父组件计算属性的值：{{ computedValue }}</p>
    <child-component @getValue="handleGetValue"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 10
    };
  },
  computed: {
    computedValue() {
      return this.value * 2;
    }
  },
  methods: {
    handleGetValue() {
      this.$emit('getValue', this.computedValue);
    }
  }
};
</script>

<template>
  <div>
    <button @click="getValue">获取父组件计算属性的值</button>
  </div>
</template>

<script>
export default {
  methods: {
    getValue() {
      this.$emit('getValue');
    }
  }
};
</script>