Vue subassembly component data using the parent / props initialization data and Problems Explanation

Connected articles: Vue custom parent component subassembly to pass custom value Explanation

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

This is an example given in the official website,

Subassemblies rewriting part of the code as follows:

<Form>
  <FormItem>
    <Label>
      用户名
    </Label>
    <Input type="text" placeholder="请输入用户名" v-model="userDetailOfParent.userName"/>
  </FormItem>
  <FormItem>
    <Label>
      登录名
    </Label>
    <Input type="text" placeholder="请输入登录名" v-model="userDetailOfParent.loginName"/>
  </FormItem>
  <FormItem>
    <Label>
      密码
    </Label>
    <Input type="password" placeholder="请输入密码" v-model="userDetailOfParent.password"/>
  </FormItem>
</Form>

data() {

  return {

    // 利用父组件数据初始化显示
    userDetailOfParent: this.userDetailOfSon,

  }

},

props: {

  /**
   * 接收父组件传递的弹窗配置
   */
  userModalConfig: {},

  /**
   * 接收父组件传递的弹窗数据
   */
  userDetailOfSon: {},

},

However, after running all found empty input boxes displayed, considering data is performed only once when the pop rendering interface, so the data is not refreshed after receiving the lead input box blank display, increasing the code is as follows:

watch: {

  userDetailOfSon: function (newVal, oldVal) {
    this.userDetailOfParent = newVal;
  },

},

Run, showed normal

 

* For self-assembly props and data differences:

Data Data subassembly, not the parent element is transferred through the subassembly private , and is readable and writable of.

All data props subassembly, through the parent assembly are transmitted to the sub-assembly, a read-only of.

 

Reference: https://segmentfault.com/a/1190000017149162