Vue.js 基于子组件的计算属性

是否可以创建依赖子组件数据的计算属性？看起来是件小事，但我想不出来

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>

{{foo}}
导出默认值{
计算：{
foo（）{
return Math.random（）
}
}
}

父组件

<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>

foo计算的属性和：{{sum}
导出默认值{
计算：{
sum（）{
//返回。。。？
}
}
}

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

相反，您可以将数据保留在父级中，并将其作为道具传递给组件。如果您使用

value

作为道具名称，您可以从

v-model

中获得一些清晰的语法。（由于以下事实，您必须使用

foos[index]

，但在本例中，您只是生成了一个索引）

newvue({
el:“#应用程序”，
数据：{
foos:[]
},
计算：{
sum（）{
返回这个.foos.reduce（（a，b）=>a+b，0）；
}
},
组成部分：{
傅：{
模板：“{value}}更改它”，
道具：['value']，
创建（）{
这个是；
},
方法：{
重新滚动（）{
这个.emit（'input'，Math.floor（Math.random（）*10））；
}
}
}
}
});

foo计算的属性和：{{sum}
可能重复@RoyJ“由于$refs不是反应性的，因此明确不建议在计算属性中使用$refs”。对于更符合文档要求的解决方案，如何保持此选项处于打开状态？
$refs
是查看子组件内部的机制。如果希望依赖子组件数据，则没有其他解决方案可供选择。更多Vue方法是将数据基于父级并作为道具传递给子级。@RoyJ道具不能使用，因为您不应该更改子组件中的父级数据。唉……当数据应该更改时，您可以使用
$emit
向父级发送信号。您给出的示例没有改变数据，因此不清楚您需要如何工作。非常感谢您花时间回答。我理解这个概念，尽管我不理解片段中的一些细节。例如，
v-model=“foos[index]”
。它是否等同于
：value=“foos[index]”
？此外，您正在从子级发出
输入事件，但它没有被
上的
监听（“父级中的输入”
。
v-model
是Ooh的简写……好的。干净语法和魔法代码之间有一条细微的界线：）