一、父子组件间的传值
（1）父传子
把想要传递的数据以绑定属性的方式传递，子组件通过props接收
注意子组件从props里接收的值不能修改，如果子组件想要修改，得要在data里中转一下
父组件
<Bird :name="name1" :age="age1"></Bird>
子组件
//注意：props里面的数据是不能修改的
props: ["name", "age"],
（2）子传父
子组件向父组件传值可以通过$emit自定义事件
父组件通过绑定子组件的自定义事件，通过方法中的e接收子组件传过来的数据
子组件
methods: {
updateData() {
this.myName = "仙鹤";
this.myAge = 10;
this.$emit("updateData", { name: this.myName, age: this.myAge });
}}
父组件
<Bird :name="name1" :age="age1" @updateData="updateData"></Bird>
methods: {
//该方法，修改name1和age1数据
updateData(e){
this.name1 = e.name
this.age1 = e.age
},
除了以上这方法，父子组件传值还有
$children,$root,$prant,$refs,ref
二、祖孙传值
最好的方式是依赖provide和注入inject
（1）方法一，较为繁琐
祖级通过绑定属性方式先把值传给父级，
父级在props接收，再使用绑定属性方式传给子级
最后孙级在props中接收，就可以使用祖级传过来的值
祖级
<Bird :name="name1" :age="age1" ></Bird>
父级
props: ["name1", "age1"]
<Dove :name1="name1" :age1="age1"></Dove>
孙级
props: ["name1", "age1"]
<div>名称：{{ name1 }}</div>
<div>年龄：{{ age1 }}</div>
（2）方法二
祖级通过provide方法，返回的对象里面的数据是依赖数据
孙级在inject中接收并直接使用，和props一样只能读不能改
祖级
provide(){
return{
name2:this.name2,
age2:this.age2
} }
孙级
inject:['name2','age2']
（3）孙级向祖级传递数据
1.在祖级中写个方法，并在依赖数据provide中添加该方法
2.孙级注入祖级组件中的依赖数据并在data中转一下，调用该方法并传值过去
祖级不但可以把数据设置为依赖数据，方法也可以设置为依赖数据
祖级
methods: {
之后这个方法会设置为依赖数据传给孙级，孙级在inject中接收，并在孙级的点击事件中调用该方法并把数据传过去
updataDove(dove){
this.name2=dove.name
this.age2=dove.age
}
},
provide(){
return{
name2:this.name2,
age2:this.age2,
//将修改name2和age2的方法，设置为依赖数据
updataDove:this.updataDove
此方法设置为依赖，孙组件就可以在inject中注入并接收
}
}
孙级
inject:['name2','age2','updataDove'],
data(){
return{
doveName:this.name2,
doveAge:this.age2
}
},
methods: {
updata2(){
this.doveName="小王"
this.doveAge=30
//执行父级组件中的updateDove方法
this.updataDove({name:this.doveName,age:this.doveAge})
这个方法是父级的
}
},
（4）此方法不止祖孙间可以传值，父子组件也可以传值
父组件
provide(){
return{
msg:'今天是个好日子'
}
},
子组件
// 从父级组件中注入依赖的数据
inject: ["msg"],
直接在页面中使用
<h3>{{ msg }}</h3>
三、兄弟组件间传值
兄弟之间关系比较复杂使用中央事件总线去操作
1.在全局js中设置中央时间总线
2.通过事件总线中的$bus，自定义事件并传输数据
3.通过事件总线中的$bus，使用$on监听自定义事件，事件发生变化则执行对应的回调函数。记得这里需要需用箭头函数，这里的this指向mounted里的this
每个组件都是单独的vue实例。this指向不一样，所以兄弟组件数据无法监听，解决方法是给vue原型对象上添加一个属性，该属性是一个vue实例对象。
mian.js页面
Vue.prototype.$bus = new Vue()
兄弟组件
//修改乌鸦信息的方法
updateCrow() {
// 触发updateCrow事件
this.$bus.$emit("updateCrow", { name: "小王", age: 30 });
},
},
兄弟组件
mounted() {
// 监听updateCrow事件，当前该事件触发时，会执行对应的回调函数
this.$bus.$on("updateCrow", (e) => {
this.name = e.name;
this.age = e.age;
});
}
四、Vuex全局状态管理
所谓状态就是数据，
统一管理的状态就是vuex
（1）安装
npm install store
（2）在src下新建store->index.js,导入并且使用
store页面
//导入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
}
}
})
mian.js页面中导入
// 导入当前项目中的全局状态管理对象
import store from './store'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
（3）定义全局状态（状态就是数据）
在state定义的全局状态，组件可以通过$store.state（全局状态管理对象的状态）点出数据
全局状态管理的，任何地方都可以使用
export default new Vuex.Store({
state:{
car:{
name:'奔驰',
price:'40W'
}
},})
组件页面
<!-- $store返回的是全局状态管理对象 -->
<div>汽车名称：{{$store.state.car.name}}</div>
<div>汽车价格：{{$store.state.car.price}}</div>
（4）定义修改状态的方法
1.在全局状态管理对象中定义修改状态的方法mutations(同步)，方法写在里面
2.每个方法都有固定的参数，第一个state状态，第二个是val值
3.在组件中写muteations里定义的方法，通过当前$store全局状态管理对象调用mutations里面定义的方法
4.调用mutations中的方法需要用commit（），第一个参数是全局中定义的方法名，第二个参数是修改的数据
只要用到这份数据不管在什么地方更改数据，所有的地方都会更新
store页面
//创建全局状态管理对象
export default new Vuex.Store({
//定义全局状态（状态就是数据）
state:{
car:{
name:'奔驰',
price:'40W'
}
},
//定义修改状态的方法
mutations:{
//该方法，修改汽车信息
updateCar(state,val){
state.car = val
}
}
})
组件页面
methods: {
//修改汽车的方法
updateCar() {
// $store返回的是当前项目中的全局状态管理对象
// 该对象的commit()方法，用于调用mutations选项里面定义的方法
this.$store.commit("updateCar", { name: "玛莎拉蒂", price: "100W" });
},
},
};
