vue 父组件如何调用子组件里的computed 方法

Question

在父组件怎么去拿到这个子组件里的computed 方法

Answer 1

this.$refs['my-component'].formTitle 即可。

但强烈不推荐这么做，因为这么做是反模式的。

在 OOP 里，computed、data 相关字段都应该是私有的，外部压根就不能访问。奈何 JS 没有私有成员一说，只能全都公开，所以你写反模式的也不会报错。

正确做法应该是子组件内 watch 这个计算属性，发生变化时向外 $emit，父组件 v-on 监听变化事件。

或是子组件提供一个公共方法比如 getFormTitle()，父组件通过 this.$refs['my-component'].getFormTitle() 方法获取。

Answer 2

计算属性不是根据所依赖的响应式属性生成的值吗?

Answer 3

计算属性是基于它们的响应式依赖进行缓存的

你只要改变组件中的editedIndex值，就可以获取到最新的formTitle；如果你的父组件要使用formTitle，则需要子组件向父组件通信，而不是你所谓的“调用子组件方法”