一、父子组件传值
父传子
在父级组件里面定义两个变量，在子级组件里面接收，但是props里面的数据是不能修改的，需要中转一下。
<template>
<div class="animal">
<h2>动物</h2>
<div>名称：{{name1}}</div>
<div>年龄：{{age1}}</div>
<Bird :name='name1' :age='age1'></Bird>
</div>
</template>
<script>
import Bird from './Bird.vue'
export default {
name: "Animal",
data(){
return{
name1:'大雁',
age1:8,
}
},
components:{
Bird
}
};
</script>
<template>
<div class="brid">
<h2>鸟类</h2>
<div>名称：{{name}}</div>
<div>年龄：{{age}}</div>
</div>
</template>
<script>
export default {
name: "Brid",
//props里面的数据是不能修改的
props:['name','age']
};
</script>
子传父
可以通过$emit触发自定义事件进行传值。
<template>
<div class="brid">
<h2>鸟类</h2>
<div>名称：{{myName}}</div>
<div>年龄：{{myAge}}</div>
<button @click='upDate'>修改信息</button>
</div>
</template>
<script>
export default {
name: "Brid",
//props里面的数据是不能修改的
props:['name','age'],
data(){
return{
myName:this.name,
myAge:this.age
}
},
methods: {
upDate(){
this.myName='仙鹤'
this.myAge=33
//向父组件传值，可以通过$emit触发自定义事件
this.$emit('upDate',{name:this.myName,age:this.myAge})
}
},
};
</script>
<template>
<div class="animal">
<h2>动物</h2>
<div>名称：{{name1}}</div>
<div>年龄：{{age1}}</div>
<Bird :name='name1' :age='age1' @upDate='upDate'></Bird>
</div>
</template>
<script>
import Bird from './Bird.vue'
export default {
name: "Animal",
data(){
return{
name1:'大雁',
age1:8,
}
},
components:{
Bird
},
methods: {
//该方法，修改name1和age1数据
upDate(e){
console.log(e);
this.name1=e.name
this.age1=e.age
}
}
};
</script>
2、祖孙组件传值
祖向孙传值
使用provide方法添加依赖数据，它里面定义的数据，子组件可以选择性注入并直接使用。在孙组件里使用inject接收。
<template>
<div class="animal">
<h2>动物</h2>
<div>名称：{{name1}}</div>
<div>年龄：{{age1}}</div>
<hr>
<div>名称：{{name2}}</div>
<div>年龄：{{age2}}</div>
<Bird :name='name1' :age='age1' @upDate='upDate'></Bird>
</div>
</template>
<script>
import Bird from './Bird.vue'
export default {
name: "Animal",
data(){
return{
name1:'大雁',
age1:8,
name2:'小明',
age2:12
}
},
components:{
Bird
},
methods: {
//该方法，修改name1和age1数据
upDate(e){
console.log(e);
this.name1=e.name
this.age1=e.age
}
},
//provide方法，返回的对象里面的数据是依赖数据
provide(){
return{
boveName:this.name2,
boveAge:this.age2
}
}
};
</script>
<template>
<div class="dove">
<h2>鸽子</h2>
<div>名称：{{ myBoveName }}</div>
<div>年龄：{{ myBoveAge }}</div>
</div>
</template>
<script>
export default {
name: "Dove",
//从父级组件中注入依赖的数据
inject: ["boveName", "boveAge"]
</script>
孙向祖传值
<template>
<div class="dove">
<h2>鸽子</h2>
<div>名称：{{ myBoveName }}</div>
<div>年龄：{{ myBoveAge }}</div>
<button @click="updateBove">修改信息</button>
</div>
</template>
<script>
export default {
name: "Dove",
//从父级组件中注入依赖的数据
inject: ["boveName", "boveAge", "updateDove"],
data() {
return {
myBoveName: this.boveName,
myBoveAge: this.boveAge,
};
},
methods: {
updateBove() {
this.myBoveName = "小红"
this.myBoveAge = 6
//执行父级组件中的updateDove方法
this.updateDove({ name: this.myBoveName, age: this.myBoveAge });
}
},
};
</script>
<template>
<div class="animal">
<h2>动物</h2>
<div>名称：{{name1}}</div>
<div>年龄：{{age1}}</div>
<hr>
<div>名称：{{name2}}</div>
<div>年龄：{{age2}}</div>
<Bird :name='name1' :age='age1' @upDate='upDate'></Bird>
</div>
</template>
<script>
import Bird from './Bird.vue'
export default {
name: "Animal",
data(){
return{
name1:'大雁',
age1:8,
name2:'小明',
age2:12
}
},
components:{
Bird
},
methods: {
//该方法，修改name1和age1数据
upDate(e){
console.log(e);
this.name1=e.name
this.age1=e.age
},
//该方法，修改name2和age2的数据
updateDove(bove){
this.name2=bove.name,
this.age2=bove.age
}
},
//provide方法，返回的对象里面的数据是依赖数据
provide(){
return{
boveName:this.name2,
boveAge:this.age2,
//将修改name2和age2的方法，设置为依赖数据
updateDove:this.updateDove
}
}
};
</script>
3、兄弟之间传值
在Vue是原型对象上，添加一个bus属性，该属性的的属性值是一个Vue实例。
将Vue的所有实例，都将共用同一个bus。
这个$bus属性，我们称之为：中央事件总线
在main.js文件中写以下代码
Vue.prototype.$bus = new Vue()
在兄弟组件中写
<template>
<div class="crow">
<h2>乌鸦</h2>
<div>名称：{{ name }}</div>
<div>年龄：{{ age }}</div>
</div>
</template>
<script>
export default {
name: "Crow",
data() {
return {
name: "小李",
age: 14,
};
},
mounted() {
//监听updateCrow事件，当前该事件触发时，会执行对应函数。
this.$bus.$on("updateCrow", (e) => {
this.name = e.name;
this.age = e.age;
});
},
};
</script>
<template>
<div class="dove">
<h2>鸽子</h2>
<div>名称：{{ myBoveName }}</div>
<div>年龄：{{ myBoveAge }}</div>
<button @click="updateBove">修改信息</button>
<button @click="updateCrow">修改乌鸦信息</button>
</div>
</template>
<script>
export default {
name: "Dove",
//从父级组件中注入依赖的数据
inject: ["boveName", "boveAge", "updateDove"],
data() {
return {
myBoveName: this.boveName,
myBoveAge: this.boveAge,
};
},
methods: {
updateBove() {
this.myBoveName = "小红"
this.myBoveAge = 6
//执行父级组件中的updateDove方法
this.updateDove({ name: this.myBoveName, age: this.myBoveAge });
},
//修改乌鸦信息的方法
updateCrow() {
//触发updateCrow事件
this.$bus.$emit("updateCrow", { name: "小盼", age: 20 });
},
},
};
</script>
4、全局状态管理
4.1安装
npm install store
4.2导入
在src文件夹下面新建一个store文件夹，再此文件夹下面新建一个index.js文件。
//导入vue
import Vue from 'vue'
//导入vuex
import Vuex from 'vuex'
//使用vuex
Vue.use(Vuex)
4.3、创建
也写在创建的index.js文件夹里
//创建全局状态管理对象
export default new Vuex.Store({
//定义全局状态（状态就是数据）
state:{
car:{
name:'奔驰',
price:'100W'
}
},
//定义修改状态的方法
mutations:{
//该方法，修改汽车信息
updateCar(state,val){
state.car=val
}
}
})
4.4、使用
<template>
<div class="animal">
<div>汽车名称：{{$store.state.car.name}}</div>
<div>汽车价格：{{$store.state.car.price}}</div>
<button @click='updateCar'>修改汽车信息</button>
</div>
</template>
<script>
export default {
name: "Animal",
methods: {
//该方法，修改name1和age1数据
upDate(e){
console.log(e);
this.name1=e.name
this.age1=e.age
},
//修改汽车信息的方法
updateCar(){
//$store返回的是当前项目中的全局状态管理对象
//该对象的commit（）方法，用于调用mutations选项里面定义的方法
this.$store.commit('updateCar',{name:'大众',price:'60W'})
}
},
};
</script>
