Vue2從嵌套組件

突變數據從Vue的導向Composing Components，而不是在一個子組件突變數據，事件應該被髮射到父組件/實例做突變。然而，Vue的事件只能傳播一個層次。對於嵌套組件，我的當前的實現是象下面這樣： Vue2從嵌套組件

當客戶端不在孫子成分的動作

=>孫組分具有發出一個事件的子組件的方法

=>子組件具有對事件重新發射到父組件的方法

=>父組件具有突變數據

這種類型i的方法當嵌套組件有更多的嵌套時，嵌套是非常乏味的。

有人可以告訴我，如果這種實現通常是嵌套組件？然而，這是非常乏味和難以維護的。如果不是，Vue有什麼實現不是反模式，也容易維護？

來源

2017-06-02 Timespace7

當你有太多的嵌套組件，那麼你可以考慮使用vuex –

當應用程序增加了複雜性，管理狀況的常用方法之一就是轉向一個狀態管理系統。

這裏是一個非常基本狀態管理系統的一個例子。

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帶來的複雜性需求，但您可能會和許多其他人一樣做。

來源

2017-06-02 18:18:08 Bert

爲了解決這個問題，我通常設置Vue公司的另一個實例充當eventhub。

首先在主js文件：

window.eventHub = new Vue();

，然後在組件：

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


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

來源

2017-06-02 09:15:13 larsemil

旁註：當建議一個事件中心（我個人很少這麼做）時，請務必讓人們意識到他們必須使用'$ off'來註銷它們當組件被「銷燬」時的回調 –

Vue2從嵌套組件

回答

相關問題