元件間的溝通

官網表示：在絕大多數情況下，最好不要干涉另一個元件實例內部或手動操作DOM 元素。
不過在某些情況下，是可以適合這樣使用，讓我們看下去。

訪問父元件Instance

$parent property可以從子元件訪問父元件的Instance。可以在後面隨時訪問父元件，用來替代將數據以prop的方式傳入子元件。

不過在絕大多數情況下，使用父元件會使得應用更難調試、理解，尤其是當你變更了父級組件的數據的時候。當我們之後回去查看那個元件的時候，很難找出那個變更是從哪裡發起的。
因此不建議使用此方式操作。

用refs訪問子元件Instance

儘管有props和事件，但有時候仍需在JavaScript裡直接訪問子元件。可以通過ref屬性為子元件賦予一個ID所用。
$refs只在元件渲染完成後生效，並且不是響應式。
這僅作為一個用於直接操作子元件的“逃生艙” —— 應該避免在template或computed中訪問$refs。

<div id="app">
	<input type="text" v-model="msg">
	<input type="button" id="update" @click="saveData()" :value="btnName">
	<child ref="childRef"></child>
<div>

let child = Vue.component('child', {
  template:`
		<div>
			childData:{{ childData }}
		</div>
	`,
  data() {
    return {
      childData: []
    }
  },
	methods: {
        updateData(value){
            this.childData.push(value)
        }
	}
})

let app = new Vue({
  el: '#app',
  data: {
    msg: 'Refs success!',
    btnName: '新增'
  },
  component: {
    'child': child
  },
  methods: {
    saveData(){
      this.$refs.childRef.updateData(this.msg)
    }
  }
})

父元件的文字框資料，點擊按鈕後，觸發saveData()事件去呼叫updateData()，將資料傳到子元件的childData陣列，頁面上就會看到新增後的文字，新增到陣列上。

Resource
父元件呼叫子元件方法及事件