vue에서 페이지 새로 고침을 구현하는 방법은 무엇입니까? 다음 글에서는 Vue에서 전체 페이지 새로 고침과 부분 새로 고침을 구현하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!
1. App.vue를 수정합니다. 코드는 다음과 같습니다.
<template> <div id="app"> <router-view v-if="isRouterAlive" /> </div> </template> <script> export default { name: 'App', 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. 부분 새로 고침 방법 정의 reloadPart:
3. 필요한 방법에서 호출합니다. 부분 새로 고침을 수행하려면
3. 응용 시나리오
페이지에서 일부 데이터가 동적으로 수정되거나 props에서 가져온 데이터 또는 기능을 통해 동적으로 설정된 속성이 있는 경우 수정 후 최신 데이터가 표시되지 않을 수 있습니다.1. 기본 및 페이지 렌더링 일반:
2 표시 열을 선택하면 페이지가 정상적으로 렌더링됩니다.
3 확인된 표시 열을 다시 확인하면 빈 영역이 나타납니다.
이때 문제를 해결하려면 단일 선택 메서드에서 부분 새로 고침 메서드 this.reloadPart()만 호출하면 됩니다.
4. 새 표시 열이 추가될 때마다 테이블에 빈 영역이 나타납니다. 이때 새 레코드가 성공적으로 추가된 후에는 전체 페이지 새로 고침 메서드만 호출하면 됩니다.
【관련 추천: "
vue.js tutorial위 내용은 Vue에서 전체 페이지 또는 부분 새로 고침을 구현하는 방법을 자세히 설명하겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!