父組件傳值給子組件后，子組件中對(duì)值進(jìn)行加工處理澡腾，進(jìn)行展示沸伏，同時(shí)子組件值是表單雙向綁定的值。此時(shí)可通過(guò)watch監(jiān)聽(tīng)子組件的props值动分，然后對(duì)子組件變量進(jìn)行初始化馋评。嘗試過(guò)用computed，雙向綁定的值需要設(shè)置set刺啦。
示例：
parent.vue
<template>
<div>
<son :initInfo = "initInfo" @getSonInfo='getSonInfo'></son>
</div>
</template>
<script>
import 'Son';
export default{
name: 'parent',
componets:{Son},
data(){
return{
initInfo: null
}
},
method:{
getSonInfo(val){
console.log(val.name,val.skill);
}
},
mounted(){
this.initInfo = {
name: '李白',
skill: '青蓮劍歌'
}
}
}
</script>
son.vue
<template>
<div>
name:<el-input v-model='name'>
skill:<el-input v-model='skill'>
<el-button @click='btnClickHandle'>
</div>
</template>
<script>
export default{
name: 'Son',
props:{
initInfo: null
},
data(){
return{
name: null,
skill: null
}
},
watch: {
initInfo(val){
this.name = `國(guó)服${val.name}`;
this.skill = `大招：${val.skill}`;
}
},
method:{
btnClickHandle(){
this.$emit('getSonInfo', {name: this.name,skill: this.skill});
}
}
}
}
</script>
