Vue 调用子子函数的最佳实践？

Question

假设你有一个 vue 项目在哪里。

1. App.vue 有一个按钮和一个用于设置画布的子 CanvasView.vue 文件。

2. CanvasView.vue 文件有一个绘制立方体的子 CubeComponent.vue

3. CubeComponent.vue 有“更改大小”或“更改颜色”功能

我想在 App.vue 上按下一个按钮来调用 CubeComponent.vue 中的函数

对于这种情况有什么标准吗？到目前为止，为了让它发挥作用，我一直在使用

defineExpose

，引用子组件，然后再次

defineExpose

。

所以在这个例子中我会

defineExpose

CubeComponent.vue 文件函数。然后在 CanvasView.vue 中引用它们。

defineExpose

CanvasView.vue 中引用 CubeComponent.vue 文件的函数，并引用 App.vue 中的这些函数来调用它们。

总的来说，这感觉不对……我觉得有更好的方法来做到这一点。有吗

Answer 1

您可以执行以下操作：

1. 在层次结构中注入事件发射器。
2. 在子组件内的发射器中注册事件侦听器。
3. 从父级发出事件。

这将使您的代码保持包含状态，并允许您从父级调用该方法而不暴露任何内容。

这里是 Vue 的注入/提供者功能的链接： https://vuejs.org/guide/components/provide-inject