Vue2从嵌套组件中改变数据

Question

从Vue指南Composing Components，不应该改变子组件中的数据，而是应该向父组件/实例发出事件以进行突变。但是，Vue的事件只能传播一个级别。对于嵌套组件，我当前的实现如下：

当客户端在孙组件中执行操作时

=＆GT;孙子组件有一个向子组件发出事件的方法

=＆GT;子组件有一种方法可以将事件重新发送到父组件

=＆GT;父组件有一个变异数据的方法

当嵌套组件具有更多嵌套时，这种类型的实现非常繁琐。

有人可以告诉我这个实现是否适用于嵌套组件？然而，这真的很乏味且难以维护。 如果不是，Vue的反模式是什么实现并且易于维护？

Answer 1

为了解决这个问题，我通常会设置另一个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");});

Answer 2

当应用程序的复杂性增加时，管理这种情况的一种常见方法是转向状态管理系统。

以下是非常基本状态管理系统的示例。

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带来的复杂性，但你可能和其他许多人一样做。