本系列博客汇总在这里:Vue.js 汇总


源码工程文件为:

一、$children

有时候我们需要父组件直接访问子组件,子组件直接访问父组件,或者是子组件访问跟组件。

  • 父组件访问子组件:使用 $children$refs reference (引用)
  • 子组件访问父组件:使用 $parent

我们先来看下 $children 的访问
this.$children 是一个数组类型,它包含所有子组件对象。我们这里通过一个遍历,取出所有子组件的 message 状态。
Vue.js_31_父子组件的访问方式_vue

二、$refs

$children 的缺陷:通过 $children 访问子组件时,是一个数组类型,访问其中的子组件必须通过索引值。但是当子组件过多,我们需要拿到其中一个时,往往不能确定它的索引值,甚至还可能会发生变化。有时候,我们想明确获取其中一个特定的组件,这个时候就可以使用 $refs

使用说明

  • $refsref 指令通常是一起使用的。
  • 首先,我们通过 ref 给某一个子组件绑定一个特定的 id
  • 其次,通过 this.$refs.id 就可以访问到该组件了。
    Vue.js_31_父子组件的访问方式_vue.js_02
三、$parent 和 $root

如果我们想在子组件中直接访问父组件,可以使用 $parent,同时,我们可以使用 $root 访问到根组件。

注意事项

尽管在 Vue 开发中,我们允许通过 $parent 来访问父组件,但是在真实开发中尽量不要这样做。子组件应该尽量避免直接访问父组件的数据,因为这样耦合度太高了。如果我们将子组件放在另外一个组件之内,很可能该父组件没有对应的属性,往往会引起问题。另外,更不好做的是通过 $parent 直接修改父组件的状态,那么父组件中的状态将变得飘忽不定,很不利于我的调试和维护。

Vue.js_31_父子组件的访问方式_vue.js_03

四、非父子组件通信

上面我们讨论的都是父子组件间的通信,那如果是非父子关系呢?非父子组件关系包括多个层级的组件,也包括兄弟组件的关系。在 Vue1.x 的时候,可以通过 $dispatch$broadcast 完成:

  • $dispatch用于向上级派发事件
  • $broadcast用于向下级广播事件

但是在 Vue2.x 都被取消了!

在 Vue2.x 中,有一种方案是通过中央事件总线,也就是一个中介来完成。但是这种方案和直接使用 Vuex 的状态管理方案还是逊色很多。并且 Vuex 提供了更多好用的功能,所以这里我们暂且不讨论这种方案,后续我们专门学习 Vuex 的状态管理。

如有错误,欢迎指正!