今天学习到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))