Vue 将子组件的方法暴露给父组件

Posted 2023-02-22

【中文标题】Vue 将子组件的方法暴露给父组件

【英文标题】：Vue expose a method from child component to parent component

【发布时间】：2019-09-02 23:09:25

【问题描述】：

在以下方法中，您认为哪种做法更好？

[1]使用$emit将子组件的方法暴露给父组件

$emit('updateAPI',  exposeAPI( childMethod: this.childMethod ))

或

[ 2 ] 使用父组件中的$refs 访问子组件方法

this.$refs.childComponent.childMethod() 

【问题讨论】：

你应该在这里阅读答案。一切都解释得很好，便于理解。 ***.com/questions/40957008/…

发射 - 绝对。它完全解耦了父元素和子元素以增加可重用性。

【参考方案1】：

关于$refs，据docs：

"$refs 仅在组件渲染后填充，并且 他们没有反应。它仅用作直接的逃生舱口 子操作 - 你应该避免从内部访问 $refs 模板或计算属性。”

关于 callbacks，我没有关于 cons 的信息，并且在 Quasar Framework 的 this component 的脚本部分中有一个很好的示例，它的父组件通过发出一个名为 reset 的函数接收并可以调度这个子函数。这就是为什么我认为这种方式更可取。

【讨论】：

是的..谢谢..我明白了....顺便说一句，到目前为止，我正在使用``$refs``仅用于调用 focus();