1.父子组件传值
父组件Animal
在父组件中，定义名称和年龄，导入子组件Bird，并绑定父组件的属性值，在子组件中，通过props来引用父组件属性的值，子组件向父组件传值，可以通过$emit触发自定义事件，将子组件中已经修改的值传给父组件，父组件定义子组件传来的方法来修改属性的值
<template>
<div class="animal">
<h2>动物</h2>
<div>名称：{{name1}}</div>
<div>年龄：{{age1}}</div>
<!-- 向子组件传值，可以通过props -->
<Bird :name="name1" :age="age1" @updateData="updateData"></Bird>
</div>
</template>
<script>
import Bird from './Bird.vue'
export default {
name: "Animal",
data() {
return {
name1:'大雁',
age1:20,
}
},
components:{
Bird
},
methods: {
//该方法，修改name1和age1数据
updateData(e){
this.name1 = e.name
this.age1 = e.age
},
},
};
子组件
<template>
<div class="bird">
<h2>鸟类</h2>
<div>名称：{{ myName }}</div>
<div>年龄：{{ myAge }}</div>
<button @click="updateData">修改信息</button>
</div>
</template>
<script>
export default {
name: "Bird",
//注意：props里面的数据是不能修改的
props: ["name", "age"],
data() {
return {
myName: this.name,
myAge: this.age,
};
},
methods: {
updateData() {
this.myName = "仙鹤";
this.myAge = 10;
// 向父组件传值，可以通过$emit触发自定义事件
this.$emit("updateData", { name: this.myName, age: this.myAge });
},
},
};
</script>
2.祖孙组件传值
例如父组件是Animal,子组件是Bird,孙组件是Dove,孙组件要从父组件中拿数据可使用依赖注入
父组件里使用provide,子组件里使用inject
父组件
<template>
<div class="animal">
<h2>动物</h2>
<div>名称：{{name2}}</div>
<div>年龄：{{age2}}</div>
<hr>
<Bird></Bird>
</div>
</template>
<script>
import Bird from './Bird.vue'
export default {
name: "Animal",
data() {
return {
name2:'小明',
age2:5
}
},
// provide方法，返回的对象里面的数据是依赖数据
provide(){
return {
boveName:this.name2,
boveAge:this.age2,
// 将修改name2和age2的方法，设置为依赖数据
updateDove:this.updateDove
}
},
components:{
Bird
},
methods: {
//该方法，修改name2和age2数据
updateDove(bove){
this.name2 = bove.name
this.age2 = bove.age
}
},
};
</script>
子组件
<template>
<div class="bird">
<Dove />
</div>
</template>
<script>
import Dove from "./Dove.vue";
export default {
name: "Bird",
components: {
Dove,
},
};
孙组件
<template>
<div class="dove">
<h2>鸽子</h2>
<div>名称：{{ myBoveName }}</div>
<div>年龄：{{ myBoveAge }}</div>
<button @click="updateData">修改信息</button>
</div>
</template>
<script>
export default {
name: "Dove",
inject: ["boveName", "boveAge", "updateDove"],
data() {
return {
myBoveName: this.boveName,
myBoveAge: this.boveAge,
};
},
methods: {
updateData() {
this.myBoveName = "晓红";
this.myBoveAge = 8;
this.updateDove({ name: this.myBoveName, age: this.myBoveAge });
},
},
};
</script>
原理：当组件配置了provide时，它就会自动创建一个新的空对象保存配置的provide，同时这个新对象的原型指向父组件的provide。通过这种原型链机制，在孙组件就很容易访问到祖辈组件的provide
而inject会尝试寻找目标key，包括provides的原型链上，没有找到key的还就返回默认值
3.兄弟组件传值
例如Dove和Crow是Bird的子组件，可通过$bus来传值，然后在main.js中声明
// 在Vue的原型对象向上添加一个属性叫$bus，该属性是一个Vue实例对象
Vue.prototype.$bus = new Vue()
子组件1
<template>
<div class="dove">
<h2>鸽子</h2>
<button @click="updateCrow">修改乌鸦信息</button>
</div>
</template>
<script>
export default {
name: "Dove",
methods: {
//修改乌鸦信息的方法
updateCrow() {
// 触发updateCrow事件
this.$bus.$emit("updateCrow", { name: "小王", age: 30 });
},
},
};
</script>
子组件2
<template>
<div class="crow">
<h2>乌鸦</h2>
<div>名称：{{ name }}</div>
<div>年龄：{{ age }}</div>
</div>
</template>
<script>
export default {
name: "Crow",
data() {
return {
name: "小刘",
age: 20,
};
},
mounted() {
// 监听updateCrow事件，当前该事件触发时，会执行对应的回调函数
this.$bus.$on("updateCrow", (e) => {
this.name = e.name;
this.age = e.age;
});
},
};
</script>
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.在组件中使用
<div>汽车名称：{{ $store.state.car.name }}</div>
<div>汽车价格：{{ $store.state.car.price }}</div>
