vue父组件传值子组件，并初始化子组件双向绑定变量

父组件传值给子组件后，子组件中对值进行加工处理，进行展示，同时子组件值是表单双向绑定的值。此时可通过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>