uniapp中，当页面显示时触发子组件的重新渲染

1. 使用watch监听数据变化：
   在子组件中使用watch来监听父组件传递的数据，一旦数据发生变化，子组件就会重新渲染。

   子组件代码示例：

   <template><div>{{ message }}</div>
   </template><script>
   export default {props: {message: {type: String,default: ''}},watch: {message(newVal) {// 当父组件传递的message发生变化时，子组件重新渲染this.$forceUpdate();}}
   }
   </script>
   

2. 使用$emit和$on：
   在父组件中改变数据后，通过$emit触发一个事件，然后在子组件中使用$on监听这个事件，并在事件处理函数中调用$forceUpdate()来强制子组件重新渲染。

   父组件代码示例：

   <template><child :message="message" @update="updateChild" />
   </template><script>
   import Child from '@/components/Child.vue';export default {components: {Child},data() {return {message: 'Hello'};},methods: {updateChild() {this.message = 'World'; // 改变数据触发子组件重新渲染}}
   }
   </script>
   

   子组件代码示例：

   <template><div>{{ message }}</div>
   </template><script>
   export default {props: {message: {type: String,default: ''}},mounted() {this.$root.$on('update', this.update);},methods: {update() {this.$forceUpdate(); // 强制重新渲染}},beforeDestroy() {this.$root.$off('update', this.update);}
   }
   </script>
   

3. 使用v-if或v-show：
   通过切换子组件的v-if或v-show条件，可以实现子组件的重新渲染。这种方法比较简单，但可能会导致组件频繁地销毁和重建。

   父组件代码示例：

   <template><child :message="message" v-if="showChild" @update="toggleChild" />
   </template><script>
   import Child from '@/components/Child.vue';export default {components: {Child},data() {return {message: 'Hello',showChild: true};},methods: {toggleChild() {this.showChild = !this.showChild; // 切换显示状态以重新渲染子组件}}
   }
   </script>