vue组件间的几种通信方式

1.父 往 子组件上传递   props

父组件上写    

子组件上使用  props接收  在vue实例中加上  1.   props:{ parent:{type="String"，default:""}   }   2.props:["parent"]

 

2.子 往父亲上传递   emit

父组件    1. 2.在 methods:{  parent(参数){console.log(参数)} }

子组件    1.触发父组件上的那个child事件     可以在created钩子函数中定义  this.$emit("child",参数)  

3.兄弟间的传参

var bus=new Vue();//new一个空的vue实例  可以单独放在外面作为一个js文件

A组件中触发事件         bus.$emit("data-a",this.name);

B组件中也触发事件     bus.$emit("getData",this.age);

C组件接收参数有俩种方式

1.使用匿名函数接收

bus.$on("data-a",name=>{             //为啥设置成箭头函数就不用绑定 this指向了  这里我就不解释了
                this.name=name;
              });

2.提前定义一个函数

getData(age){
                this.age=age;
              }

bus.$on("getData",this.getData.bind(this)); //不过有个坑    你得把这个触发事件 getData永久绑定在 C组件什么上 

4.使用vuex   vuex是vue中数据状态管理的一个工具 

Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时，必须通过Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action，但Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上

  至于详细怎么使用  可以看我之前的那个 vuex那个博客 这种方法 我就不在 这里详细讲解了

5.vuex和localStorage配合使用

vuex 是 vue 的状态管理器，存储的数据是响应式的。但是并不会保存起来，刷新之后就回到了初始状态，具体做法应该在vuex里数据改变的时候把数据拷贝一份保存到localStorage里面，刷新之后，如果localStorage里有保存的数据，取出来再替换store里的state

let defaultCity = "上海"
try {   // 用户关闭了本地存储功能，此时在外层加个try...catch
  if (!defaultCity){
    defaultCity = JSON.parse(window.localStorage.getItem('defaultCity'))
  }
}catch(e){}
export default new Vuex.Store({
  state: {
    city: defaultCity
  },
  mutations: {
    changeCity(state, city) {
      state.city = city
      try {
      window.localStorage.setItem('defaultCity', JSON.stringify(state.city));
      // 数据改变的时候把数据拷贝一份保存到localStorage里面
      } catch (e) {}
    }
  }
})

其实还有几种方法 我就不再这里一一赘述了  有想深入研究的童鞋 可以去百度下