Vue 有副作用的父子数据访问

父组件和子组件之间的数据流通，应该是父组件的数据通过 prop 传递给子组件，然后子组件再通过 $emit 事件通知父组件更新数据；
这是正常的流程，也是没有副作用的流程；
但时除了这种方法，也可以通过其他方法实现父子组件的数据流通；但是会有副作用，不过如果能掌握的好的话是可以使用的；这里就来研究一下；

1. 读取或修改的阶段
父组件读取或操作子组件的数据，要在 mounted() 阶段
子组件读取父组件的数据，在 created() 阶段就能读取到；

// 实例读取子组件的数据
mounted() {
    console.log(this.$children)
},

// 子组件读取父组件的数据
created() {
	console.log(this.$parent)
},

2. ref

通过 ref 标记过的 DOM 可以通过 vm.$refs 访问到
$refs 是一个对象，里边就是标记过 ref 特性 的所有 DOM 元素和组件实例。

// 标记
<gx-input ref='gx'/>

// 访问这个组件
this.$refs.gx

// 注意：访问要在 mounted() 阶段之后；

// 比如，我这里有三个子组件，分别进行了 ref标记
template: `
<div id="#app">
    <Test ref="a" /> 
    <Test ref="b" />
    <Test ref="c" />
</div>
`

// 在 mounted() 阶段，打印出 $refs 来就是一个对象
mounted() {
    console.log(this.$refs)
},
// 输出
// {a: VueComponent, b: VueComponent, c: VueComponent}


//但是如果时通过循环循环出来的 $refs 里就只有一个 a对象，然后这个对象里是一个数据
<Test ref="a" v-for="item in 3" :key="item" />
// 打印出来如下：
mounted() {
    console.log(this.$refs.a)
},
// 输出
// [VueComponent, VueComponent, VueComponent]