uniapp中,修改父组件的值,数据需要实时更新到子组件,并重新渲染 |
您所在的位置：网站首页 › vue父组件值改变,子组件不能重新渲染 › uniapp中,修改父组件的值,数据需要实时更新到子组件,并重新渲染 |
|
父组件引入子组件 其中需要更改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. s e t 获 取 t h i s . set获取 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();通过这个方法可以实现 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |