Vue中实现【组件局部刷新】及【页面刷新】

在Vue中，组件局部刷新可以通过使用v-if或v-show来控制元素的显示与隐藏来实现。页面刷新可以通过JavaScript中的location.reload()方法实现。

以下是一个简单的例子：

<template>
  <div>
    <!-- 组件局部刷新 -->
    <button @click="refreshComponent">刷新组件</button>
    <my-component v-if="isComponentVisible"></my-component>
 
    <!-- 页面刷新 -->
    <button @click="refreshPage">刷新页面</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isComponentVisible: true,
    };
  },
  methods: {
    refreshComponent() {
      this.isComponentVisible = false;
      this.$nextTick(() => {
        this.isComponentVisible = true;
      });
    },
    refreshPage() {
      location.reload();
    },
  },
  components: {
    MyComponent: {
      // 这里是组件的定义
      template: '<div>我是一个组件</div>',
    },
  },
};
</script>

在这个例子中，my-component是一个简单的Vue组件，通过v-if和isComponentVisible变量控制其显示与隐藏。当点击【刷新组件】按钮时，通过改变isComponentVisible的值，实现组件的局部刷新。而点击【刷新页面】按钮则直接使用location.reload()方法刷新整个页面。