Vue2.0 组件参数传递获取进阶

1、父组件访问子组件: 使用 $children 或 $refs

$children 示例

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

在父组件中，通过 this.$children 可以访问子组件。
this.$children 是一个数组，它包含所有子组件的实例。

$refs 示例

组件个数较多时，我们难以记住各个组件的顺序和位置，通过序号访问子组件不是很方便。
在子组件上使用 ref 指令，可以给子组件指定一个索引 ID。

// 在父组件中，则通过$refs.索引ID访问子组件的实例：
showChildComponentData: function() {
    alert(this.$refs.cc1.msg);
    alert(this.$refs.cc2.msg);
}

2、子组件访问父组件: 使用 $parent

下面这段代码定义了两个组件：child-component和它的父组件parent-component。
在子组件中，通过this.$parent可以访问到父组件的实例。

注意：尽管可以访问父链上任意的实例，不过子组件应当避免直接依赖父组件的数据，尽量显式地使用 props 传递数据。另外，在子组件中修改父组件的状态是非常糟糕的做法，因为：

1. 这让父组件与子组件紧密地耦合;

2. 只看父组件，很难理解父组件的状态。因为它可能被任意子组件修改！理想情况下，只有组件自己能修改它的状态。

3、如何使用 props 来显式地传递参数。

// 父组件

// 子组件