one Vueインスタンスが@shrpneとして記述されています。
すべてのコンポーネントのVueインスタンスをインスタンス化し続けると、デバッグ中またはコンポーネント通信中に問題が発生し、全体的に非常に厄介になり、Vueによって提供される親子通信および継承が欠落します。
私はあなたのVueアーキテクチャーについてはわかりませんが、私は現在、AEMのVueで作業するためのマニュアルを作成しています。
基本的な前提は、ビルド時にVueのinline-templateとvanilla-js、No typescript、nodeJS build、jsxなどを使用することです。ページがロードされ、jsバンドルが存在する前でもDOMはすでにそこにあるので、すべてのコンポーネントをマウントする1つのVueインスタンスをインスタンス化するだけで、コンポーネントをマウントする必要があります。これはSEOにも最適です（サーバー側でVueコンポーネントをJavaでレンダリングする予定がない限り...理論的には可能ですが、幸運を祈る！ここでは）
はサンプルAEM/Vueのコンポーネントです：
<simple-counter inline-template>
<button v-bind:style="style" v-on:click="add">${properties.clicksText || 'clicks: '} {{ counter }}</button>
</simple-counter>
JS：それは
上にインライン化されますので、それは、JSでテンプレートを持っていませんか
予告
Vue.component('simple-counter', {
data: function() {
return {
counter: 0,
style: {
color: 'red',
width: '200px'
}
}
},
methods: {
add: function() {
this.counter = this.counter + 1;
this.style.color = this.style.color == 'red' ? 'green' : 'red';
}
}
})
このようにして、さらにクライアントライブラリの最後に、より多くのAEMコンポーネントをビルドすることができます。すべてのVueのコンポーネントは、実行することができ、登録されています：
new Vue({ el: '#app'})
これは、コースを外れ、あなたのページbodyまたはいくつかの他の親要素にidを持っていることを前提としていますapp。
この2番目の部分は、オーサリングダイアログの送信後にコンポーネントの再マウントを有効にする方法です。ページを更新するだけで済みます。
は、私たちはページhere 基本的な考え方は、コンポーネントにaftereditイベントを追加してのみ、新たに変異したコンポーネントに新しいVueのインスタンスを実行することですを更新せずにコンポーネントを再マウントする方法について質問があります。.. 。まだその