vue2组件间异步传参
排查得到的结果:如果父组件异步结果更新后,子组件无法监听到 props 的变化,可能是由于 Vue.js 的响应式系统的限制导致的。Vue.js 在检测到 props 发生变化时,并不总是能够自动触发子组件的重新渲染,特别是在 props 是对象或数组时。场景: 父组件通过异步请求, 获取到结果后给props赋值(获取结果:object),子组件通过监听props值的变化, 进行渲染, 设置监听首
·
场景: 父组件通过异步请求, 获取到结果后给props赋值(获取结果:object),子组件通过监听props值的变化, 进行渲染, 设置监听首次渲染触发,
问题: 当父组件有结果后, 子组件就是不渲染, 父组件数据变了,子组件监听也不触发
排查得到的结果:如果父组件异步结果更新后,子组件无法监听到 props 的变化,可能是由于 Vue.js 的响应式系统的限制导致的。Vue.js 在检测到 props 发生变化时,并不总是能够自动触发子组件的重新渲染,特别是在 props 是对象或数组时。
解决1: 在父组件中使用 v-if
来确保在异步结果返回后才渲染子组件。这样可以确保子组件在接收到完整的 props 数据后再进行渲染。
<template>
<div>
<child-component v-if="asyncData" :data="asyncData"></child-component>
</div>
</template>
<script>
import axios from 'axios';
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
asyncData: null
};
},
mounted() {
// 异步加载数据
axios.get('your-api-url')
.then(response => {
this.asyncData = response.data;
})
.catch(error => {
console.error('Error fetching data: ', error);
});
}
};
</script>
解决2: deep: true // 深度监听props对象的变化(这个方案没试,可以的话给留言)
<script>
export default {
props: ['data'],
watch: {
// 深度监听props变化
data: {
handler(newValue) {
// 当props发生变化时执行相关操作,例如重新渲染子组件
// 注意:在这里你可以执行其他你想要的操作,而不一定非要重新渲染子组件
},
immediate: true, // 确保在初始化时也触发监听器
deep: true // 深度监听props对象的变化
}
}
};
</script>
。
更多推荐
已为社区贡献1条内容
所有评论(0)