Vue中如何通过长尾实现父子组件间的引用？

本文共计1361个文字，预计阅读时间需要6分钟。

在Vue中，提到【父子组件】时，一定会想到我们常用的父子组件通信方式：props、$on()、$emit()。比如：

也是说，在一般情况下，子组件是不能直接引用父组件或Vue实例的数据的，但可以通过以下方式实现：

- 使用props将数据从父组件传递到子组件。- 使用$on()监听自定义事件，通过$emit()触发事件，实现组件间的通信。

vue中提到，则一定会想到我们常用的父子组件通信：props+$on()、$emit() ，如图：

也就是说，虽然在一般情况下，子组件是不能引用父组件或者Vue实例的数据，但是对于在开发中出现的“数据需要在组件中来回传递”，我们最简单的解决办法就是通过props（和v-on）将数据从父组件传到子组件，再用$emit将数据从子组件传到父组件，以此循环引用。

但是在另一些场景下，我们可能想要比如（在父组件中）拿到子组件对象，然后直接操作其中数据，去实现一些功能，比如方法的调用。