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]