Vue에서 자식 구성 요소를 다시 렌더링

페이지를 렌더링하지 않고 하위 구성 요소를 다시 렌더링하는 것은 저에게 항상 어려운 일이었고 한동안 Vue 개발자였습니다. 데이터가 변경되면 항상 페이지를 다시 렌더링해야 했습니다.

그러다가 지난주에 나타났습니다! 부모 내에서 로드되고 있는 양식을 업데이트해야 했습니다. 양식에는 사용자 저장소 값이 있었고 물론 sessionStorage가 내 양식을 업데이트했을 때 인식하지 못했지만 브라우저가 페이지를 다시 로드하도록 하고 싶지 않았습니다. .

그래서 저는 제 동료 시니어 개발자 Jim을 낚아채서 성공적으로 해 본 적이 있는지 물었습니다. 여기 파티에 지각해서 여러분 중 일부에게 계란 빠는 법을 가르치는 것 같았지만 3시가 지나서 충격을 받았습니다. Vue 개발자로서 4년 동안 저는 이것을 하는 방법을 몰랐습니다. 그래서 많은 분들이 유용하게 사용하시길 바랍니다.

어쨌든 내 이야기로 돌아가! Jim은 자신이 이 작업을 몇 번 수행했으며 특히 하드 데이터 기반 앱 또는 지속적인 데이터 변경 작업을 수행하는 경우 얼마나 유용했는지 언급했습니다. 그래서 우리는 Visual Studio 코드를 시작했고 그가 방법을 가르쳐주었기 때문에 이 블로그를 블로그에 올려 모든 것을 보여줄 생각이었습니다. 이 블로그와 함께 스크린캐스트를 할 것이고 여기에서 전체 코드 예제를 찾을 수 있습니다. 내 코드 샌드박스(아래 링크). FYI Jim은 이것에 대한 완전한 신용을 얻습니다! 그는 내 오비완 같다!

그래서 여기에 부모와 자식 콤보가 있고 일부 데이터 변경 후에만 자식을 다시 로드하려고 한다고 가정해 보겠습니다.

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/superman.png" width="25%" />
    <comics :key="comics_reload" />
    <hr />
    <button class="btn btn-success" v-on:click="reload()">
      Reload the comics
    </button>
    <hr />
    <h2 class="h4">
      I rendered the table {{ times }} but didnt re-render the page
    </h2>
  </div>
</template>

보시다시피 일부 만화가 하위 요소로 로드되고 '만화 다시 로드'를 누를 때마다 해당 부분을 다시 로드하기를 원합니다. 이제 이것의 '핵심'은 다음과 같습니다.

<comics :key="comics_reload" />

바인드 키는 이것의 주요 부분이며 자식 다시 로드를 트리거합니다. 따라서 자식 요소가 있고 다시 로드를 트리거할 키가 있습니다. 다음은 무엇입니까?

좋습니다. 이제 데이터 포인트를 0으로 설정해야 합니다. 추가하면

data() {
    return {
      times: 0,
      comics_reload: 0,
    };
  },

이제 데이터 세트의 comics_reload 키 포인트가 0으로 설정되었습니다. 따라서 해당 데이터 포인트를 증가시키는 메서드만 있으면 모든 작업이 완료됩니다!

reload() {
      this.comics_reload++;
      this.times = this.times + 1;
    },

우후! 바로 거기입니다! comics_reload는 메서드를 실행할 때마다 부딪히며, 그럴 때 키가 구성 요소를 다시 로드합니다.

3년에서 4년 동안 나는 그것을 어떻게 하는지 몰랐고 오늘 우리가 여기 있습니다. 이것이 어떤 식으로든 도움이 되었기를 바라며 여기에서 전체 코드 예제를 찾을 수 있습니다.

https://codesandbox.io/s/vue-reload-child-2ik9n

또한 마음에 든다면 Jim에게 트위터를 팔로우하세요! 그는 훌륭한 개발자이며 매우 도움이 됩니다.

사람들을 읽어 주셔서 감사합니다.