来自嵌套组件的 Vue2 变异数据答案

【问题标题】：Vue2 mutating data from nested component来自嵌套组件的 Vue2 变异数据
【发布时间】：2017-11-03 15:15:22
【问题描述】：

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

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

=> 孙子组件有一个向子组件发出事件的方法

=> 子组件有一个向父组件重新发送事件的方法

=> 父组件有一个改变数据的方法

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

谁能告诉我这种实现是否适用于嵌套组件？但是，这确实很乏味且难以维护。如果不是，什么实现不是 Vue 的反模式并且易于维护？

【问题讨论】：

当嵌套组件太多时，可以考虑使用vuex

标签： vue.js vuejs2 vue-component

【解决方案1】：

为了处理这个问题，我通常会设置另一个 Vue 实例来充当 eventthub。

首先在你的主 js 文件中：

window.eventHub = new Vue();

然后在组件中：

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


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

【讨论】：

旁注：在建议事件中心（我个人很少这样做）时，请始终让人们意识到当组件为destroyed时，他们必须使用$off来取消注册他们的回调

【解决方案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 带来的复杂性，但您可能会和许多其他人这样做。

【讨论】：