Vue에서 전체 페이지 또는 부분 새로 고침을 구현하는 방법을 자세히 설명하겠습니다.

vue에서 페이지 새로 고침을 구현하는 방법은 무엇입니까? 다음 글에서는 Vue에서 전체 페이지 새로 고침과 부분 새로 고침을 구현하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

1. 전체 페이지 새로 고침

1. App.vue를 수정합니다. 코드는 다음과 같습니다.

<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script>
export default {
  name: &#39;App&#39;,
  provide() { // 父组件中返回要传给下级的数据
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

핵심 사항은 아래 그림과 같습니다.

2. 새로 고쳐야 하는 항목을 가져오고 참조하려면 주입을 사용하세요. ：

3. 호출해야 하는 메서드에서 this.reload()를 호출하세요

2. isReloadData 변수를 새로 고쳐야 하는 데이터에 변수를 바인딩합니다. 레이블에서:

2. 부분 새로 고침 방법 정의 reloadPart:

3. 필요한 방법에서 호출합니다. 부분 새로 고침을 수행하려면

3. 응용 시나리오

페이지에서 일부 데이터가 동적으로 수정되거나 props에서 가져온 데이터 또는 기능을 통해 동적으로 설정된 속성이 있는 경우 수정 후 최신 데이터가 표시되지 않을 수 있습니다.

• 페이지 데이터가 변경되면 페이지 렌더링에 버그가 발생합니다. 예를 들어 el-table 구성 요소의 데이터가 변경되면 빈 영역이 나타납니다.
• 이때 전체 페이지 새로 고침이나 부분 새로 고침이 유용할 것입니다. 아래 스크린샷은 제가 겪은 두 번째 상황의 예이며 전체 페이지 새로 고침과 부분 새로 고침을 사용하여 해결되었습니다.

1. 기본 및 페이지 렌더링 일반:

2 표시 열을 선택하면 페이지가 정상적으로 렌더링됩니다.

3 확인된 표시 열을 다시 확인하면 빈 영역이 나타납니다.

이때 문제를 해결하려면 단일 선택 메서드에서 부분 새로 고침 메서드 this.reloadPart()만 호출하면 됩니다.

4. 새 표시 열이 추가될 때마다 테이블에 빈 영역이 나타납니다. 이때 새 레코드가 성공적으로 추가된 후에는 전체 페이지 새로 고침 메서드만 호출하면 됩니다.

【관련 추천: "

vue.js tutorial

"】

위 내용은 Vue에서 전체 페이지 또는 부분 새로 고침을 구현하는 방법을 자세히 설명하겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!