vue项目中如何实现组件之间的数据共享和修改-创新互联

vue项目中如何实现组件之间的数据共享和修改？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

我们在使用vue开发过程中会遇到这样的情况，在父组件中引入了子组件，需要将父组件的值传到子组件中显示，同时子组件还可以更改父组件的值。

以我目前的一个项目的开发为例，如下图页面：

在父组件中，我引入了两个子组件，一个是左边的导航栏，还有中间的一个富文本编译器组件，当我点击左边导航栏时，中间的页面会切换，也就是改变引入的子组件。

怎么实现呢，首先，设置在该页面index.vue中设置一个变量index，左边导航栏每一项也对应一个index值，导航菜单绑定select函数，@select="handleSelect"，@是v-on的简写。

handleSelect函数接收到参数，然后发射出去，再由父组件接收就可以了。

 handleSelect(key, keyPath) {
  console.log(key, keyPath);
  this.changeIndex(keyPath[1])
  },
  changeIndex:function(key) {
  this.$emit("IndexChanged",key)
  }