Question

我对Vue有点陌生，我试图弄清楚如何从组件的计算值访问计算值。请查看以下小提琴：https://jsfiddle.net/85ma3rct/

<script src="https://unpkg.com/vue"></script>
<div id="app">
<table>   
  <floor></floor> 
  <floor></floor>
  <floor></floor>
</table>  
  Largest area: {{ largest_area}}
</div>


 Vue.component('floor', {
  data: function () {
    return {
      width: 20,
      height: 20
    }
  },
  computed: {
    area: function () {
        return this.width * this.height;
    }
  },  
  template: '<tr><td><input type="number" v-model="width"></td>' +
                            '<td><input type="number" v-model="height"></td>' +
                '<td>{{ area }}</td>' +
                '</tr>'
})

new Vue({
  el: '#app',
  computed: {
    largest_area: function () {
        // How to get this from component computed values...
        return 0
    }
  }, 
})

如何通过多个组件中的计算值获得最大面积计算值？

Answer 1

您可以将<floor>组件转换为custom elements that can use v-model。然后，每个<floor>都可以将计算出的区域发送到其父级，后者可以收集和计算最大值。

例如

Vue.component('floor', {
  template: `<tr>
  <td><input type="number" v-model="width" @input="update"></td>
  <td><input type="number" v-model="height" @input="update"></td>
  <td>{{ area }}</td>
  </tr>`,
  data: () => ({ width: 20, height: 20 }),
  computed: {
    area() { return this.width * this.height }
  },
  methods: {
    update() { this.$emit('input', this.area) }
  },
  created() { this.update() } // emit the initial value
})

new Vue({
  el: '#app',
  data: { areas: [0, 0, 0] },
  computed: {
    largest_area () { return Math.max(...this.areas) }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
<div id="app">
  <table>
    <floor v-for="(_, n) in areas" v-model="areas[n]" :key="n"></floor>
  </table>
  Largest area: {{ largest_area }}
</div>

通常，要支持v-model，您的组件将具有value prop 。但是，由于您的组件初始化了自己的数据，因此我省略了这一点。唯一真正的要求是您的组件发出 input 事件。

Answer 2

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

Theme.AppCompat.Light.DarkActionBar

然后在父级

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

此处https://jsfiddle.net/ittus/kuo9crjm/1/

演示

Answer 3

您可以将$refs用于此引荐-Refs

将ref添加到组件中，无论您在哪里导入和使用它-

<MyComponent ref="child" />

然后，您可以从使用状态component中访问其所有属性。

在消耗组件中，您可以像下面的$refs属性中访问它

this.$refs.child.{child-property}

将ref添加到floor

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

然后引用

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

从组件计算值创建根计算值？

3 个答案: