<!-- 父組件 parent.vue -->

<template>
  <div class="parent">
    <h3>問卷調(diào)查</h3>
    <child v-model="form.name"></child>
    <div class="">
      <p>姓名：{{form.name}}</p>
    </div>
  </div>
</template>

<script>
  import child from './child.vue'

  export default {
    components: {
      child
    }，
    data () {
      return {
        form: {
          name: '請輸入姓名'
        }
      }
    }
  }
</script>

<!-- 子組件 child.vue -->

<template>
  <div class="child">
    <label>
      姓名：<input type="text" :value="currentValue" @input="changeName">
    </label>
  </div>
</template>

<script>
  export default {
    props: {
      // 這個 prop 屬性必須是 valule，因為 v-model 展開所 v-bind 的就是 value
      value: ''
    },
    methods: {
      changeName (e) {
        // 給input元素的 input 事件綁定一個方法 changeName 
        // 每次執(zhí)行這個方法的時候都會觸發(fā)自定義事件 input，并且把輸入框的值傳遞進去。
        this.$emit('input', e.target.value)
      }
    }
  }
</script>

<!-- 父組件 parent.vue -->

<template>
  <div class="parent">
    <h3>問卷調(diào)查</h3>
    <child :formData.sync="form"></child>
    <div class="">
      <p>姓名：{{form.name}}</p>
    </div>
  </div>
</template>

<script>
  import child from './child.vue'

  export default {
    components: {
      child
    },
    data () {
      return {
        form: {
          name: '請輸入姓名',
          age: '21'
        }
      }
    }
  }
</script>

<!-- 子組件 child.vue -->

<template>
  <div class="child">
    <label>
      姓名：<input type="text" v-model="form.name">
    </label>
    <label>
      年齡：<input type="text" v-model="form.age">
    </label>
    <label>
      地點：<input type="text" v-model="form.address">
    </label>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        form: {
          name: '',
          age: '',
          address: ''
        }
      }
    },
    props: {
      // 這個 prop 屬性接收父組件傳遞進來的值
      formData: Object
    },
    watch: {
      // 因為不能直接修改 props 里的屬性，所以不能直接把 formData 通過v-model進行綁定
      // 在這里我們需要監(jiān)聽 formData，當它發(fā)生變化時，立即將值賦給 data 里的 form
      formData: {
        immediate: true,
        handler (val) {
          this.form = val
        }
      }
    },
    mounted () {
      // props 是單向數(shù)據(jù)流，通過觸發(fā) update 事件綁定 formData，
      // 將 data 里的 form 指向父組件通過 formData 綁定的那個對象
      // 父組件在綁定 formData 的時候，需要加上 .sync
      this.$emit('update:formData', this.form)
    }
  }
</script>

data () {
 return {
  parentObject: {
   child_1_obj: {},
   child_2_obj: {},
  }
 }
}