满口金牙 2023-03-24 14:46 采纳率: 91.1%
浏览 41
已结题

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

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)
}

  • 写回答

3条回答 默认 最新

  • MossGrower 全栈领域新星创作者 2023-03-24 15:13
    关注

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

    假设子组件使用 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 监听函数,从而父组件可以获取更新后的值。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 4月2日
  • 已采纳回答 3月25日
  • 修改了问题 3月24日
  • 修改了问题 3月24日
  • 展开全部

悬赏问题

  • ¥15 vmtools环境不正常
  • ¥15 请问如何在Ubuntu系统中安装使用microsoft R open?
  • ¥15 jupyter notebook
  • ¥30 informer时间序列预测
  • ¥20 SSR引物多态性分析
  • ¥15 大漠插件在Win11易语言注册调用和免注册灵异事件,VS上注册调用完全没问题
  • ¥15 Addressable缓存机制做热更新的问题
  • ¥15 微信开发者工具vant组件
  • ¥15 iPhone iCloud云盘资料删除,MAC丢失50多G桌面资料
  • ¥20 希望各位学长可以给我答疑