使用场景
点击按钮（或某变量改变时），在不刷新整个页面的情况下，局部刷新（重绘）图表，或者重新加载子组件。
实现方案
1. 在需要局部刷新的组件上，加上 v-if = "show" ，show的默认值为 true , 这样第一次渲染页面时，该组件能正常显示
2. 在点击事件中，先将 show 变为 false ，然后在 this.$nextTick 中将 show 变为 true , 这样便实现了组件的局部刷新
methods: { update() { this.show = false; this.$nextTick( () => { this.show = true } ) } },
完整的范例代码
父组件
<template> <div> <button @click="update">刷新test1</button> <Test1 v-if="show"></Test1> </div> </template> <script> import Test1 from './test1' export default { components: {Test1}, data() { return { show: true, } }, methods: { update() { this.show = false; this.$nextTick( () => { this.show = true } ) } }, } </script> <style scoped> </style>
子组件 test1
<template> <div>test1</div> </template> <script> export default { name: "test1", mounted() { alert("正在渲染test1") } } </script> <style scoped> </style>
