Vue.js 中的组件中的 $parent 和 $children 有什么作用？

在 Vue.js 中, $parent 和 $children 用于实现父子组件直接通信。
$parent:

用于访问父组件实例。
使用方式:this.$parent

$children:

用于访问子组件数组。
使用方式:this.$children

示例:
父组件:

js
data() {
  return {
    msg: 'Hello'
  }
}

模板:

html
<child />

子组件:

js
template: `<div>{{$parent.msg}}</div>`

渲染结果:

Hello

子组件直接访问了父组件的 msg 数据。

反之,父组件也可以直接访问子组件:
父组件模板:

html 
<child ref="c1"></child>

方法:

js
this.$children[0].someMethod()  // 访问第一个子组件
this.$refs.c1.someMethod()      // 访问ref为c1的子组件 

所以,$parent 和 $children 主要用于:

1. 父子组件直接访问对方的数据或方法。
2. 调试时检查组件树的结构。

但是,不推荐在组件间过度使用它们,因为:

1. 过高的耦合度,不利于未来的可维护性和可扩展性。
2. $parent 和 $refs 无法在 render 函数和 JSX 中使用。
3. 应该优先通过 props 和 $emit 实现父子通信,尽量避免直接访问实例。