【场景】 :父组件多次修改通过 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>
Logo

前往低代码交流专区

更多推荐