Vue3.1 父组件创建实例, 传子组件操作实例,,父组件不能直接获取实例值吗

Question

Vue3.1

父组件创建实例, 传给子组件
const tableInstance = new TableHandle()   // 在子组件中修改操作
watch(() => tableHandleInstance.results.value , (newVal) => {
    console.log('tableHandleInstance 数据变化............................',newVal)
})



问题:
父组件监听不到最新的  tableInstance .results.value 

但可以通过函数拿到,这是什么梗
function test(){
    console.log('tableHandleInstance response?.count..........', tableHandleInstance.response?.count)
}

Answer 1

父组件创建实例，传给子组件操作实例的情况，如果父组件需要使用子组件修改后实例的值，可以通过监听实例值的变化来获取最新值。

假设子组件使用 props 接收到了父组件传来的实例 myInstance，并在子组件中对其进行修改，可以在 watch 中监听到值的变化。

子组件代码：

<template>
  <div>
    <!-- 省略其他内容 -->
  </div>
</template>

<script>
export default {
  props: {
    myInstance: {
      required: true
    }
  },
  watch: {
    myInstance(newValue) {
      console.log('myInstance value changed:', newValue);
      // 父组件可以在这里获取更新后的值
    }
  },
  // 省略其他内容
}
</script>

需要注意的是，在子组件中修改实例的值，要避免直接修改传入的实例，而应该使用其方法修改其属性，这样能触发监听实例属性变化的钩子函数。

父组件创建实例的代码示例：

<template>
  <div>
    <ChildComponent :myInstance="myInstance"/>
    <div>myInstance value: {{ myInstance.value }}</div>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  data() {
    return {
      myInstance: reactive({
        value: 'initial value'
      })
    };
  }
  // 省略其他内容
}
</script>

这样，在子组件中修改 myInstance 属性的值时，会触发 watch 中的 myInstance 监听函数，从而父组件可以获取更新后的值。