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)
}
父组件创建实例，传给子组件操作实例的情况，如果父组件需要使用子组件修改后实例的值，可以通过监听实例值的变化来获取最新值。
假设子组件使用 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 监听函数，从而父组件可以获取更新后的值。
要通过emit传参给父组件
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！