uniapp中,修改父组件的值,数据需要实时更新到子组件,并重新渲染

父组件引入子组件

			</view>
			<gbro-marquee ref="marqueeRef" broadcastType='text' direction="left" :broadcastIconIsDisplay="!true" :touchEvent="!true"
				:broadcastData='broadcastData' :broadcastStyle='broadcastStyle'>
			</gbro-marquee>
		</view>
		<view class="main-content">

其中需要更改broadcastStyle中的speed的数据,并及时渲染到子组件

data() {
			return {
				notableWrapWidth: 0,
				notableWordWidth: 0,
				notableWord: '给程序员一把找工作的放大镜,帮你找到最合适的工作,家品牌vs我都快破位',
				broadcastData: [],
				broadcastStyle: {
					speed: 0, //每秒3个字
					font_size: "32", //字体大小(rpx)
					text_color: "#F5A623", //字体颜色
					back_color: "#fff", //背景色
				},
				widddd: 888
			};
		},

本来我在子组件中采用watch或者computed等方法,把props中的方法重新赋值

watch: {
	broadcastStyle: {
				handler(val) {
						this.broadcastStyle.speed = val.speed;
						this.wordSpeed = val.speed;	
				},
				deep: true,
				immediate: true,
			}
}

或者

computed: {
			wordSpeed1() {
				return this.wordSpeed;
			}
		},

都是没有效的,原因是这个时候页面已经渲染完成了
这个时候,我再父组件中使用this.$set获取this.$forceUpdate();实现,注意调用这个方法必须在页面渲染之前
本来我这里的业务是在比较文字内容长度是否超过盒子,跑马灯效果就动起来,否则就是静态展示的,结果通过元素获取盒子宽度的时候,就必须是页面渲染完成

const query = uni.createSelectorQuery().in(this);
				query.select('.notable-wrap').boundingClientRect().exec(res => {
					console.log(res);
					notableWrapWidth = res[0].width;
					console.log(notableWrapWidth, notableWordWidth);
					if (notableWordWidth > notableWrapWidth) {
						this.$set(this.broadcastStyle, 'speed', 1);
						// this.broadcastStyle.speed = 1;
						// this.$forceUpdate();
					} else {
						this.$set(this.broadcastStyle, 'speed', 0);
						// this.broadcastStyle.speed = 0;
						this.$forceUpdate();
					}
				});

这个方法实现不了
最终我决定获取屏幕的宽度和文字数量*一定宽度实现比较

				let notableWordWidth;
				//屏幕宽度
				const { windowWidth } = uni.getSystemInfoSync();	
				console.log(windowWidth);
				// 字体长度
				notableWordWidth = this.broadcastData[0].length * 14;
if (notableWordWidth > windowWidth) {
					this.$set(this.broadcastStyle, 'speed', 1);
					// this.broadcastStyle.speed = 1;
				} else {
					this.$set(this.broadcastStyle, 'speed', 0);
					// this.broadcastStyle.speed = 0;
				}
				// this.$forceUpdate();

通过这个方法可以实现