【Vue學習筆記之，父子組件之間的傳值（着重於父組件傳對象值到子組件）】

今天學習到vue中，父子組件的傳值
例子：
父組件 ————> 子組件

<parent>
    <sonComponent:sonValue="editSon" ref="sonComponent"></sonComponent>  <!--其中editSon爲父組件的data中的值->
</parent>
import sonComponent from 'url'  ------->子組件的路徑
export default {
    name:"parent",
    components:{sonComponent},
    data(){
         return {
        editSon:{
            name:'hxl'
            }
        }
    }
}
在子組件中獲取傳過來的值：
<sonZuJian>
    <el-input v-model="sonObj.name">
</sonZuJian>
export default{
    name:"son",
    props:{
        sonValue:{
        type:Object
        }
    },
   watch:{
       sonValue(val){
        this.sonObj = val;
        }
    },
 data(){
    return{
       sonObj:{},
       secondObj:{}
    }
 }
}

這樣就可以在父組件中把父組件的editSon這個對象傳到子組件中了

父組件獲取子組件的值：
var thisVal = this.$refs.sonComponent.secondObj;

父組件也可以獲取子組件的方法
this.$refs.sonComponent.queryDetail(param);------》這裏還可以進行傳參

 克隆vue對象的方法：JSON.parse(JSON.stringify(obj))