前端框架：Vue父子组件之间的访问

有时候我们需要父组件访问子组件，子组件访问父组件，或者自组件访问根组件。

针对这几种情况，Vue.js都提供了响应的API：

● 父组件访问子组件：使用$children或$refs</br>
● 子组件访问父组件：使用$parent</br>
● 子组件访问根组件：使用$root</br>

$children示例

下面这段代码定义了3个组件：父组件parent-component，两个子组件child-component1和child-component2。</br>

在父组件中，通过this.$children可以访问子组件</br>

this.$children是一个数组，它包含所有子组件的实例</br>

1.png 2.png 3.png result.gif

$refs示例

组件个数较多时，我们难以记住各个组件的顺序和位置，通过序号访问子组件不是很方便。

在子组件上使用v-ref指令，可以给子组件指定一个索引ID：

ref.png

在父组件中，则通过$refs.索引ID访问子组件的实例：

this.$refs.png

$parent示例

下面这段代码定义了两个组件：child-component和它的父组件parent-component。

在子组件中，通过this.$parent可以访问到父组件的实例。

$parent.png this.$parent.png result.png

注意：尽管可以访问父链上任意的实例，不过子组件应当避免直接依赖父组件的数据，尽量显式地使用props传递参数。

另外，在子组件中修改父组件的状态是非常糟糕的做法，因为:

1. 这让父组件与子组件紧密地耦合；
2. 只看父组件，很难理解父组件的状态。因为他可能被任意子组件修改!理想状况下，只有组件自己能修改它的状态。