父组件传值给子组件后,子组件中对值进行加工处理,进行展示,同时子组件值是表单双向绑定的值。此时可通过watch监听子组件的props值,然后对子组件变量进行初始化。尝试过用computed,双向绑定的值需要设置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 = `国服${val.name}`;
this.skill = `大招:${val.skill}`;
}
},
method:{
btnClickHandle(){
this.$emit('getSonInfo', {name: this.name,skill: this.skill});
}
}
}
}
</script>