Vue关于父组件更新子组件子组件不重新渲染最新数据的问题 |
您所在的位置：网站首页 › vue父组件修改子组件中数据 › Vue关于父组件更新子组件子组件不重新渲染最新数据的问题 |
|
父beforeUpdate ->子beforeUpdate ->子updated ->父updated 父组件更新，子组件一定会重新渲染，但子组件重新渲染只会走它的beforeUpdate和uptated这些周期函数，data不会重新执行，如果刚开始第一次渲染的时候，把属性都挂载到当前组件的data中，只有第一次渲染子组件才会执行，不管以后对子组件怎么刷新都不起作用 父组件 import son from './son.vue'; export default { components: { son }, data() { return { n:0, m:0 }; }, mounted(){ // 让父组件的状态更新 setInterval(() => { this.n=100; this.m=200; }, 2000); } };子组件 {{ A }}====={{ B }} export default { props:['n','m'], //=>父组件更新，子组件重新渲染的时候data函数不会再执行（只有第一次渲染子组件，在beforeCreate和created中间的时候执行一次） data() { return { A:this.n, B:this.m }; }, };解决办法 方案一：使用v-if控制组件有还是没有，对应的就是销毁和渲染 /* ==============父组件============== */ import son from './son.vue'; export default { components: { son }, data() { return { n: 0, m: 0, flag: true }; }, mounted() { // 让父组件的状态更新 setInterval(() => { this.flag = false;//组件没有了代表销毁了, this.n = 100; this.m = 200; this.$nextTick(() => { this.flag = true;//销毁之后重新渲染,走的是子组件的整套周期函数 }) }, 2000); } }; /* ==============子组件============== */ {{ A }}====={{ B }} export default { props: ['n', 'm'], data() { return { A: this.n, B: this.m }; }, };方案二：使用计算属性 方案三：子组件直接使用props中的属性 方案四：使用普通方法 /* ==============父组件============== */ /* ==============子组件============== */ {{ A }}====={{ B }} //不起作用 {{ M }}====={{ N }} //使用计算属性 {{ n }}====={{ m }} //直接使用props中的属性 {{ A() }}====={{ B() }} //使用普通方法 export default { props: ['n', 'm'], computed: { M() { return this.m; }, N() { return this.n; } }, methods: { A() { return this.n; }, B() { return this.m; } }, data() { return { A: this.n, B: this.m }; }, };方案五：使用watch监听data中的状态 /* ==============父组件============== */ /* ==============子组件============== */ export default { data() { return { n: '', }; }, watch: { //=>当vuex中的数据发生改变，我们把自己的result的状态也改变 ["$store.state.custom.myList"](val) { //=>val就是vuex中state中的数据 this.n = val; }, }, }; |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |