Question

是否可以创建依赖于子组件数据的计算属性？看起来像是一项微不足道的任务，但我无法弄明白......

foo组件

<template>
    {{ foo }}
</template>

<script>
export default { 
    computed: {
        foo() {
            return Math.random()
        }
    }
}
</script>

父组件

<template>
    foo computed property sum: {{ sum }}
    <Foo v-for="n in 10"></Foo>
</template>

export default { 
    computed: {
        sum() {
            // return...?            
        }
    }
}
</script>

Answer 1

你可以，但这是一种非常不寻常的方法，所以它可能不是你想要实现的最佳选择。

相反，您可以将数据保留在父级中，并将其作为prop传递给组件。如果您使用e.email = NULL作为道具名称，则可以从value获得一些不错的干净语法。（由于you can't v-model an alias的事实，您必须使用v-model，但在这种情况下，您只是生成索引。

foos[index]

new Vue({
  el: '#app',
  data: {
    foos: []
  },
  computed: {
    sum() {
      return this.foos.reduce((a, b) => a + b, 0);
    }
  },
  components: {
    Foo: {
      template: '<div>{{ value }} <button @click="reroll">Change it</button></div>',
      props: ['value'],
      created() {
        this.reroll();
      },
      methods: {
        reroll() {
          this.$emit('input', Math.floor(Math.random() * 10));
        }
      }
    }
  }
});

基于子组件的计算属性

1 个答案: