コンポーネントを再マウントする方法は？

私は、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()の書き換えを前提としていますが、これは避けたいものです。

私が理解しているのは、レンダリング時に正しい場所にドームに注入された実際のHTML/CSS/JSコードなので、「再マウント」という概念が存在しないことを恐れています。 data（）の前に必ず書き直してください。

出典

2017-11-23 WoJ

あなたは 'data'をreseting避けたい理由は？ – mklimek

@mklimek：私はコンポーネントをリセットするためのよりクリーンな方法を探していました。 'data（）'を上書きすると、元のままにしたり、元のコピー（空）やその他のものを持っている必要があります。私はそれを一般的な状態にリセットするコマンドを再インストールすることを望んでいました。それがないなら、これは世界の終わりではありません。それは私のための美学の問題（そしてコードの単純さ）です。 – WoJ

この便利なone-linerを使って、データを 'data（）'関数が返す元のデータに）リセットできます： 'Object.assign（this。$ data、this。$ options.data.call（this））;' – AlbinoDrought

私は、データを変更する方法を含まないと考えていたテーブルコンポーネントでこれを実行しなければなりませんでした。そのトリックはキーを変更することです。キーが変更されると、vueはそれを別のコンポーネントと見なします。たとえば、created()フックは1回だけ実行されるため、値の変更が確認されると、新しいオブジェクトが表示されます。

例：

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

ありがとうございます - これは素晴らしいです。これは、私がコンポーネントのために何らかの痛みを必要とする私の意図した使用にも完全に適合します（小道具として渡されます）。私はコンポーネントの中に「キー」についてここで、そしてそこに読んでいます、これはもっと学ぶ機会です。再度、感謝します！ – WoJ

コンポーネントを再マウントする方法は？

答えて

関連する問題