vue 父组件监听子组件的数据变化 父组件监听子组件的data

子组件的data

data(){
    return{
        form:{
            age: ''
        }
    }
},
mounted(){
    this.form.name = '李四'                   // 不会触发监听
    this.$set(this.form, 'name', '王五')      // 会触发监听
    this.form.age = '18'                     // 会触发监听
}

父组件

<template>
    <div>
        <!-- 子组件 -->
        <son ref="sonRef"></son>
    </div>
</template>

父组件script部分代码

<script>
import son from './son.vue'
export default {
  components: {
    son
  },
 mounted(){
      this.$nextTick(() => {
          // 拿取子组件data
          const useData = this.$refs.sonRef.$data
          // 监听
          this.$watch(() => {
            return useData
          },(val) => {
            console.log(val) // 打印为子组件的data数据
          },{deep:true})
      })
   }
}
</script>