Vue--父子组件传值&祖孙组件传值&兄弟组件传值&全局状态管理

1.父子组件传值
父组件Animal
在父组件中，定义名称和年龄，导入子组件Bird，并绑定父组件的属性值，在子组件中，通过props来引用父组件属性的值，子组件向父组件传值，可以通过$emit触发自定义事件，将子组件中已经修改的值传给父组件，父组件定义子组件传来的方法来修改属性的值

2.祖孙组件传值
例如父组件是Animal,子组件是Bird,孙组件是Dove,孙组件要从父组件中拿数据可使用依赖注入
父组件里使用provide,子组件里使用inject
父组件

子组件

原理：当组件配置了provide时，它就会自动创建一个新的空对象保存配置的provide，同时这个新对象的原型指向父组件的provide。通过这种原型链机制，在孙组件就很容易访问到祖辈组件的provide
而inject会尝试寻找目标key，包括provides的原型链上，没有找到key的还就返回默认值
3.兄弟组件传值
例如Dove和Crow是Bird的子组件，可通过$bus来传值，然后在main.js中声明

// 在Vue的原型对象向上添加一个属性叫$bus，该属性是一个Vue实例对象
Vue.prototype.$bus = new Vue()

子组件1

子组件2

4.全局状态管理
1.安装

npm install store

2.导入并创建全局管理对象

//导入vue
import Vue from 'vue'
//导入vuex
import Vuex from 'vuex'
//使用vuex
Vue.use(Vuex)
//创建全局状态管理对象
export default new Vuex.Store({
  //定义全局状态（状态就是数据）
  state:{
    car:{
        name:'奔驰',
        price:'40W'
    }
  },
  //定义修改状态的方法
  mutations:{
    //该方法，修改汽车信息
    updateCar(state,val){
        state.car = val
    }
  }
})

3.在组件中使用

汽车名称：{{ $store.state.car.name }}
    
汽车价格：{{ $store.state.car.price }}