ネストされたコンポーネントからデータを変更するVue2

Question

ビューガイドComposing Componentsから、子コンポーネントのデータを変更する代わりに、親コンポーネント/インスタンスにイベントを送信してその変更を行う必要があります。ただし、Vueのイベントは1つのレベルまでしか伝播できません。ネストされたコンポーネントについては、私の現在の実装では、以下のようなものです： クライアントは孫のコンポーネントでアクションを行い

=>孫コンポーネントは、子コンポーネントにイベントを放出するためのメソッドを持っている

=>子コンポーネントは、親コンポーネントにイベントを再放出する方法を有する

=>親コンポーネントは、データを

Iのこのタイプを変異する方法を有していますネストされたコンポーネントのネストが増えると、実装が非常に面倒です。

この実装が通常ネストされたコンポーネントであるかどうか教えてください。しかし、これは本当に退屈で、維持するのは難しいです。 もしそうでなければ、どのような実装がVueのアンチパターンではなく、メンテナンスも簡単ですか？

Answer 1

状態管理システム。

非常に基本状態管理システムの例です。

const store = { 
    state:{ 
    message: "Hello World" 
    }, 
    changeMessage(newMessage){ 
     this.state.message = newMessage    
    } 
} 

Vue.component("grand-child",{ 
    template:` 
    <div><button @click="sayHello">Say Hello</button></div> 
    `, 
    methods:{ 
    sayHello(){ 
     store.changeMessage("Hello from grand child!") 
    } 
    } 
}) 

Vue.component("child", { 
    template: ` 
    <grand-child></grand-child> 
    ` 
}) 

new Vue({ 
    el:"#app", 
    data:{ 
    state: store.state 
    } 
}) 

ここではan exampleです。基本的な考え方は、stateの管理を外部エンティティに委託することです.Vueコードは、主にのレンダリングで、レンダリングの状態になり、ユーザーからの操作や変更が必要な状態管理システムに通知されます。ドキュメントでは、この種のシステムについて語っていますhere。

自宅で育ったソリューションでは長い道のりを歩むことができますが、プロジェクトの複雑さが増え、VueエコシステムでVuexが提供される、より正式な状態管理方法が必要になることがよくあります。

個人的に私は頻繁にVuexに付随する複雑さの必要性を見いだすことはありませんが、多くの人がそうかもしれませんdo。あなたはあまりにも多くのネストされたコンポーネントを持っている場合

Answer 2

これを処理するには、通常、Vueの別のインスタンスをイベントハブとして機能させるように設定します。コンポーネントで

window.eventHub = new Vue(); 

、その後：あなたのメインのjsファイルの最初の

複雑でアプリケーションの増加、状況を管理する一般的な方法の一つはに有効にすることです

//component emitting event: 
eventHub.$emit('shout', this.target); 


//component listening to event 
eventHub.$on('shout', function(){alert("EVENT EVENT");});