vue——强制刷新子组件重新渲染_子组件只要监听到父组件值变化_ 则重新渲染子组件

vue——重新渲染子组件

• 不妥的方式：v-if
• 较好的方式：forceUpdate
• 最好的方法：key

不妥的方式：v-if

1. 在父组件中，给子组件添加 v-if 属性

<Button v-if="refresh" :data='data' />

2. 监听 data，当 data 发生变化时，重新渲染子组件

export default {
	data(){
		data: [],
		refresh: true
	},
	watch:{
		data(){
			this.refresh = false;
			this.$nextTick(() => {
		        // 重新渲染组件
		    	this.refresh = true;
		    });
		}
	}
}

提示：这个方法会强制删除旧组件并创建新组件。

较好的方式：forceUpdate

// 全局
import Vue from 'vue';
Vue.forceUpdate();

// 使用组件实例
export default {
  methods: {
    methodThatForcesUpdate() {
      // ...
      this.$forceUpdate();
      // ...
    }
  }
}

提示：这不会更新任何计算属性，调用 forceUpdate 仅仅强制重新渲染视图。

最好的方法：key

如果key保持不变，则不会更改组件，但当key发生更改时，vue 会删除旧组件并创建新组件，它将重新初始化自身并 “重置” 其状态

<template>
  <component-to-re-render :key="componentKey" />
</template>


export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
}

提示：如果确实需要重新渲染某些内容，请选择 key 更改方法而不是其他方法。