Vue는 부분 새로 고침을 어떻게 구현합니까? (코드 예)

우리 모두는 Vue의 가장 강력한 핵심이며 라우팅도 특히 귀여운 부분이라는 것을 알고 있습니다. 그러나 라우팅은 일부 대형 구성 요소에 적합하지만 때로는 URL 경로를 볼 때 변경 사항이 있습니다. 소규모 로컬 새로 고침의 경우 현재 동적 구성 요소를 사용해야 합니다.

Vue 자체에 유지되는 요소는 구성 요소를 is 속성에 동적으로 바인딩하여 동적 구성 요소 전환을 쉽게 구현할 수 있습니다.

코드는 다음과 같습니다: SlotDome.vue:

<template>
  <div>
    <slot></slot>
    <slot name="wise"></slot>
 
    <el-radio-group v-modal="tabView">
      <el-radio-button label="simple1" @click="toSim(1)">
        <button>页面一</button></el-radio-button>
      <el-radio-button label="simple2" @click="toSim(2)"><button>页面二</button>
      </el-radio-button>
    </el-radio-group>
    <keep-alive>
      <component :is="tabView"></component>
    </keep-alive>
  </div>
</template>
<style rel="stylesheet/stylus">
  el-radio-button
    &:hover
      cursor pointer
</style>
<script>
  import simple1 from "./simple/simple1.vue";
  import simple2 from "./simple/simple2.vue";
  export default{
    data(){
      return {
        tabView: "simple1"
      }
    },
    methods: {
      toSim(index){
        this.tabView = `simple${index}`;
      }
    },
    components: {
      simple1,
      simple2
    }
  }
</script>

simple1.vue:

<template>
  <div>
    这是页面一
    <input type="text">
  </div>
</template>

simple2.vue:

<template>
  <div>
    这是页面二
    <input type="text">
  </div>
</template>

위의 예에서 tabView의 값이 변경되면 는 해당 구성요소를 렌더링합니다. 이는 라우팅 효과와 매우 유사하지만 주소 표시줄은 변경되지 않았습니다

그러나 이런 방식으로 구성 요소가 전환될 때마다 모든 구성 요소가 다시 렌더링되므로 구성 요소의 데이터가 유지될 수 없습니다. 이때 재렌더링을 피하기 위해 연결 유지를 사용하여 구성 요소를 메모리에 유지할 수 있습니다.

페이지 효과는 다음과 같습니다.

관련 권장 사항:

2020 프론트엔드 Vue 인터뷰 질문 요약(답변 포함)

vue 튜토리얼 추천: 2020년 최신 5개 vue.js 비디오 튜토리얼 선택

더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요: 프로그래밍 소개! !

위 내용은 Vue는 부분 새로 고침을 어떻게 구현합니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!