Vue父组件修改了通过 props传递给子组件的数据,子组件没有及时更新
<!-- 父组件 --><template><div><my-component ref="myComponent" :id="curId" /></div></template><script>export default {data(){return {...
·
【场景】 :父组件多次修改通过 props传入子组件的参数,子组件每次处理参数时获取不到最新的数据(是指在方法中使用参数、不是直接在html中展示),总是慢一步,获取到的是上一次传入的数据。
【解决方法】 :示例写得比较简单,主要是提供我当时使用 $nextTick()
来解决的一种思路,具体不同场景灵活运用,有的场景可能可以用其他解决办法的。
【父组件】
<!-- 父组件 -->
<template>
<div>
<button @click="showMy">修改传入子组件的参数</button>
<my-component ref="myComponent" :id="curId" />
</div>
</template>
<script>
export default {
data(){
return {
curId: 0
}
},
methods: {
// showMy是父组件中修改(需要传递给子组件的)数据的时候调用的方法,在修改数据之后,会主动调用子组件的方法使用该数据
showMy(){
// 1. 先修改 通过props传递给子组件的属性值
this.curId = 1;
this.$nextTick(() => {
// 2. 再调用子组件的方法使用该属性
// 如果不使用 nextTick的话,子组件方法内获取到的有可能是这次赋值之前的值,下次调用时才能获取到此次赋值的值(应该是跟 Vue的异步事件队列有关系)
this.$refs.myComponent.initData();
})
}
}
}
</script>
【子组件】
<script>
export default {
props: ['curId'],
methods: {
// initData是子组件中用到(从父组件传递到子组件)数据的方法
initData(){
console.log(this.curId);
}
}
}
</script>
更多推荐
已为社区贡献5条内容
所有评论(0)