구성 요소를 다시 마운트하는 방법은 무엇입니까?

DOM 렌더링의 일부로 탑재 된 구성 요소가 있습니다. 애플리케이션의 골격은 부모와 $emit 데이터 (이것은 몇 양식 입력 표시)구성 요소를 다시 마운트하는 방법은 무엇입니까?

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>title</title> 
    </head> 
    <body> 
    <div id="app"> 
     <my-component></my-component> 
     <button>press this button to reload the component</button> 
    </div> 
    </body> 
</html>

<my-component> 기능적이다.

다시 마운트 할 수있는 방법이 있습니까? 목표는 구성 요소 콘텐츠와 설정을 방금 처음으로 렌더링 된 것처럼 설정하는 것입니다 (상태를 보유하는 data() 요소 재설정 포함).

거기에는 some solutions이 있지만 모두는 data()의 재 작성을 가정합니다. 나는 이것을 피하고 싶습니다.

내 이해는 구성 요소가 렌더링 중에 올바른 위치에 dom에 주입 된 실제 HTML/CSS/JS 코드이므로 "다시 마운트"라는 개념이 존재하지 않는다는 것을 두려워합니다. data()를 다시 시작하기 전에 반드시 다시 작성하십시오.

출처

2017-11-23 WoJ

가 왜'data'을 다시 설정하라는 피하려고? – mklimek

@mklimek : 구성 요소를 재설정하는 더 깨끗한 방법을 찾고있었습니다. 'data()'를 덮어 쓰면, 원본을 옆에 두거나, 그것의 "원본 복사본"(비어 있음)이나 다른 것들을 가져야합니다. 나는 그것을 일반적인 상태로 재설정하는 명령을 다시 설치하기를 바랬다. 이것이 없다면 세상의 종말이 아닙니다. 그것은 나를위한 미학의 문제입니다 (코드 간단 함). – WoJ

이 편리한 한 줄짜리 데이터로 데이터를 재설정 할 수 있습니다 ('data()'함수가 반환 한 원본으로) :'Object.assign (this. $ data, this. $ options.data.call (this));' – AlbinoDrought

데이터를 변경하는 방법을 포함하지 않는 테이블 구성 요소를 사용해야했습니다. 트릭은 키를 변경하는 것입니다. 키가 변경되면 vue는이를 다른 구성 요소로 간주합니다. 예를 들어 created() 훅은 한 번만 실행되므로 값이 변경되면 새로운 개체가 표시됩니다.

예 :

Vue.component('my-component', { 
 
    template: `<div>{{ rand }}</div>`, 
 
    data() { 
 
    return { 
 
     rand: '' 
 
    } 
 
    }, 
 
    created() { 
 
    this.rand = Math.round(Math.random() * 1000) 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    componentKey:0 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script> 
 

 
<div id="app"> 
 
    <my-component :key="componentKey"></my-component> 
 
    <button @click="componentKey++">press this button to reload the component</button> 
 
</div>

출처

2017-11-24 04:53:53 Daniel

감사합니다 - 이것은 우수합니다. 이것은 또한 구성 요소에 대한 약간의 id를 필요로하는 나의 용도와 완벽하게 딱 들어 맞습니다 (소품으로 전달됨). 구성 요소에 '핵심'에 대해 여기저기서 읽었습니다. 더 많은 것을 배울 수있는 기회입니다. 다시 한 번 감사드립니다! – WoJ

구성 요소를 다시 마운트하는 방법은 무엇입니까?

답변

관련 문제