Vue中如何正确访问子组件的计算属性？

嘿，我完全懂你遇到的困扰——子组件里调整了a、b的值，还有依赖它们的sum计算属性，但父组件输出的JSON就是没法同步反映这些变化，对吧？这其实是Vue单向数据流的特性在起作用，咱们一步步把这个问题捋顺解决：

1. 别直接修改子组件的Props！ #

Vue的props是单向绑定的，子组件压根就不该直接修改props的值——这不仅会打破数据流向的一致性，开发模式下Vue还会给你抛出警告呢。你之前可能在子组件里写了类似this.a = 5的代码，这种操作只会修改子组件内部的临时值，根本传不到父组件那里去。

正确的姿势是：子组件通过$emit触发自定义事件，把要修改的值传递给父组件，让父组件自己去更新数据源。举个简单例子：

<!-- 子组件 -->
<template>
  <div>
    <input type="number" :value="a" @input="$emit('update-a', $event.target.value)">
    <input type="number" :value="b" @input="$emit('update-b', $event.target.value)">
  </div>
</template>
<script>
export default {
  props: ['a', 'b']
}
</script>

然后父组件监听这些事件，更新自己的响应式数据：

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent :a="parentA" :b="parentB" 
                    @update-a="parentA = Number($event)" 
                    @update-b="parentB = Number($event)" />
    <p>父组件JSON: {{ parentJson }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      parentA: 1,
      parentB: 2
    }
  },
  computed: {
    parentJson() {
      return JSON.stringify({ 
        a: this.parentA, 
        b: this.parentB, 
        sum: this.parentA + this.parentB 
      })
    }
  }
}
</script>

2. 给计算属性加Setter，实现“双向联动” #

你的sum是基于a、b的计算属性，默认它只有getter（只读），如果想通过修改sum反过来调整a或b，就得给计算属性配置setter，然后在setter里触发事件通知父组件更新。比如：

<!-- 子组件里的计算属性 -->
<script>
export default {
  props: ['a', 'b'],
  computed: {
    sum: {
      get() {
        return this.a + this.b;
      },
      set(newSum) {
        // 这里可以根据业务逻辑拆分sum到a和b，比如让a等于新sum，b归0
        this.$emit('update-a', newSum);
        this.$emit('update-b', 0);
      }
    }
  }
}
</script>

这样当你在子组件里修改sum的时候，就会触发对应的事件，父组件的数据源更新后，JSON自然就跟着变了。

3. 确保父组件数据源是响应式的 #

最后要注意：父组件里的a、b必须是Vue实例的响应式数据（也就是在data选项里声明的变量），如果是普通的非响应式变量，就算父组件更新了值，JSON也不会自动同步。上面的例子里我们把parentA和parentB放在data里，同时用计算属性parentJson来生成JSON，这样只要数据变化，JSON就会自动更新。

总的来说，核心就是遵守Vue的单向数据流规则：子组件不直接碰props，通过事件通知父组件改数据；计算属性要双向修改就加setter。这样整个数据链路都是响应式的，父组件的JSON就能准确反映所有变化啦！

内容的提问来源于stack exchange，提问作者Zaroth