Vue中如何实现父子组件间的$parent和$children引用？

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

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

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

1. 使用props向子组件传递数据。

2.使用$emit()在子组件中向父组件发送事件。

3.使用$on()在父组件中监听子组件的事件。

例如：

vue

vue

通过这种方式，我们就可以实现父子组件之间的通信。

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

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

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