# Vue $refs 動態傳值

在父組件裡要對子組件傳值，
通常是使用`props`的方式傳遞data給子組件參考，
因Javascript的物件是以參考(pass by reference)的方式傳遞，
所以父丟給子的物件資料是不可更動的。

若是要動態傳值，在Vue 2可以使用$refs進行父子組件的溝通。

#### - 父層
給要溝通的子組件設定ref名稱，才能取得完整實例

<template>
  <parents
    ref="myChild"
    @click="handle"
    ...
  />
</template>

<script>
export default {
    data() {
        return {
            msg: 'Hello Child'
        }
    },
    methods: {
      handleEdit () {
      // 寫在methods裡要使用$nextTick就能等頁面渲染後調用 
        this.$nextTick(() => {
            this.$refs.myChild.getMsgContent(this.msg)
        })
      }
    }
}
</script>     

#### - 子層
接受父層動態傳遞的值，在子層提供methods讓父層傳遞

<script>
export default {
    data() {
        return {
            childMsg: ''
        }
    },
    methods: {
        getMsgContent (val) {
          this.childMsg = val
        }
    }
}
</script>     

若$refs取不到子層methods可以參考以下這篇
參考: https://blog.csdn.net/changzhen11/article/details/84067816