Vue.js 从组件计算值创建根计算值？

我对Vue有点陌生，我正在尝试找出如何从组件的计算值访问计算值。 请看这把小提琴：

最大面积：{{最大面积}

您可以将

组件转换为。然后，每个

可以将计算出的面积发送给其父级，该父级可以收集并计算最大值

比如说

Vue.component（'floor'）{
模板：`
{{area}}
`,
数据：（）=>（{宽度：20，高度：20}），
计算：{
area（）{返回this.width*this.height}
},
方法：{
update（）{this.$emit（'input'，this.area）}
},
created（）{this.update（）}//发出初始值
})
新Vue({
el:“#应用程序”，
数据：{区域：[0,0,0]}，
计算：{
最大面积（）{return Math.max（…this.areas）}
}
})

最大面积：{{最大面积}

一种可能的解决方案是监视子组件中的面积值变化，并向父组件发出值

  watch: {
    area: {
      handler() {
         this.$emit('input', this.area)
      },
      immediate: true
    }
  },

然后是父母

<table>

  <floor @input="changeVal($event, 0)"></floor> 
  <floor @input="changeVal($event, 1)"></floor>
  <floor @input="changeVal($event, 2)"></floor>

  </table>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    areas: [0, 0, 0]
  },
  computed: {
    largest_area: function () {
        return Math.max(...this.areas)
    }
  },
  methods: {
    changeVal(val, index) {
       this.$set(this.areas, index, val)
    }
  }
})

新Vue({
el:“#应用程序”，
数据：{
消息：“您好，Vue.js！”，
区域：[0,0,0]
},
计算：{
最大面积：功能（）{
返回Math.max（…this.areas）
}
},
方法：{
changeVal（val，index）{
this.$set（this.areas，index，val）
}
}
})

---

此处演示

您可以使用

$refs

进行此参考-

将

ref

添加到您的组件中，无论您在何处导入并使用它-

<MyComponent ref="child" />

将

ref

添加到

floor

<table>   
  <floor ref="floor"></floor> 
</table>  

---

我不知道你是什么意思。这个答案中的所有内容都是反应性的我不好，对不起：）这违反了@Phil，

refs

不再是反应性的，这阻止了

子

意外变异

父

状态。我不确定我是否遗漏了一点，但这是根据OP要求从官方文档中推荐的方法-调用方法与访问REF并访问其数据和计算属性非常不同。不建议这样做

<table>   
  <floor ref="floor"></floor> 
</table>  

new Vue({
  el: '#app',
  computed: {
    largest_area: function () {
        console.log(this.$refs.floor.area())
        return 0
    }
  }, 
})