在使用vue框架进行开发的时候，组件化的开发模式，问题比较多的就是组件中如何进行传递参数，下面我们就来看一下。
一般有三种传值方式：1.父传子、2.子传父、3.兄弟组件之间通信4.爷孙跨级传值
1.父组件向子组件传值
一般会在子组件里面定义props来做接收，这是比较常见的情况
（1）这是父组件
<template>
<div>
<div>我是父组件</div>
<div>我发送给第一个组件的信息是:{{message}}</div>
<div>
<div id="son">
<Son1 :message="message" />
</div>
</div>
</div>
</template>
<script>
import Son1 from "../components/son1";
import Son2 from "../components/son2";
export default {
components: {
Son1 ,
Son2
},
data() {
return {
message: "我是父组件，我给你发消息",
};
}
};
</script>
12345678910111213141516171819202122232425262728
可以看到，我们在第一个子组件中传递了一个message，那么我们就需要在子组件上使用props来接受message
（2）这是子组件
<template>
<div>
<div id="title">我是第一个子组件</div>
<div>我接受到的父组件的消息是：{{message}}</div>
</div>
</template>
<script>
export default {
props: {
message: {
type: String
}
}
};
123456789101112131415
2.子组件向父组件传值
这时候就需要利用vue中的$emit将想要传递的值通过函数的形式传出，在父组件接收
//在子组件中的方法中
this.$emit(arg1,arg2) arg1:父组件中的方法名字，arg2:要传出的值
12
//这是之前设置好的第二个子组件Son2
<template>
<div>
<div id="title">我是第二个子组件</div>
<div>我要发送给父组件的值：{{msg}}</div>
<button @click="toParent">向父组件发送信息</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: "我是第二组件，我要给父组件传值",
};
},
methods: {
toParent() {
//toParent就是父组件中的方法， this.msg就是要从子组件传递到父组件中的值
this.$emit("toParent", this.msg);
}
}
};
</script>
123456789101112131415161718192021222324
我在button上绑定了一个点击事件，函数里面传出了一个方法名为toParent的方法，这时候我们就要去父组件接收这个函数，它会带一个返回值，这个返回值就是我们需要从子组件传的值。
// 这是父组件
<template>
<div>
<div>我是父组件</div>
<div>我即将接收第二组件传值是：{{child2Msg}}</div>
<div>
<div id="child2">
<Son2 @toParent="getMag" />
</div>
</div>
</div>
</template>
<script>
import Son1 from "../components/son1";
import Son2 from "../components/son2";
export default {
components: {
Son1,
Son2
},
data() {
return {
child2Msg: ""
};
},
methods: {
getMag(msg) {
//直接获取当前子组件传递过来的值，进行赋值
this.child2Msg = msg;
}
}
};
</script>
1234567891011121314151617181920212223242526272829303132333435
此时我在父组件里面定义了一个@toParent方法这个名称要和子组件里面this.$emit(arg1)的命名一样，用来接收。在getMag里面接收一个参数就是当前传回的值。
3.兄弟之间组件传值
兄弟组件之间就需要一个中间值，我在这里称为bus。在vue文件main.js中，我们利用 Vue.prototype.bus=new Vue() 来定义，此时我们就有了一个中间量。
//这是其中第一个兄弟组件--用来传递
<template>
<div>
<div id="title">我是第一个子组件</div>
我要给第二个兄弟发信息，内容是：
<input type="text" v-model="to" />
</div>
<button @click="toBrother">点我给兄弟传值</button>
</div>
</template>
<script>
export default {
data() {
return {
to: "哈喽老二"
};
},
methods: {
toBrother() {
// 点击按钮，将数据绑定到bus中的emit里面的toBrother
this.bus.$emit("toBrother", this.to);
}
}
};
</script>
1234567891011121314151617181920212223242526
//这是第二个兄弟组件--用来接收
<template>
<div>
<div id="title">我是第二个子组件</div>
<div>我得到的兄弟组件信息是：{{get}}</div>
</div>
</template>
<script>
export default {
data() {
return {
get: ""
};
}
beforeCreate() {
//创建之前获取到bus中的toBrother里面的值
this.bus.$on("toBrother", msg => {
this.get = msg;
});
}
};
</script>
1234567891011121314151617181920212223
4.爷孙组件跨级传值
// parent组件
<template>
<div>
<div>{{msg}}</div>
<button @click="changeMsg">修改msg的值</button>
<son></son>
</div>
</template>
<script>
import Son from "./Son";
export default {
name: "parent",
components: { Son },
provide() {
return {
injectData: this.msg
};
},
data() {
return {
msg: "传值前",
};
},
methods: {
changeTest() {
this.msg= "传值后";
}
}
};
</script>
12345678910111213141516171819202122232425262728293031
//son组件
<template>
<div>{{injectData}}</div>
</template>
<script>
export default {
name: "son",
inject: ["injectData"],
mounted() {
console.log(this.injectData)
},
};
</script>
123456789101112131415
parent组件使用provide提供一个injectData，son组件通过inject获取到parent注入的数据，以上就是它的最简用法。
provide/inject这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
provide 选项应该是：一个对象或返回一个对象的函数
inject 选项应该是：一个字符串数组，或 一个对象，对象的 key 是本地的绑定名
5.使用vuex实现组件间传值
（1）.state中的数据获取时使用 this.s t o r e . s t a t e . x x x ; （ 2 ） 修 改 s t a t e 中 的 数 据 必 须 通 过 m u t a t i o n s 中 提 供 的 方 法 ， 调 用 方 法 使 用 t h i s . store.state.xxx; （2）修改state中的数据必须通过 mutations 中提供的方法，调用方法使用 this.store.state.xxx;（2）修改state中的数据必须通过mutations中提供的方法，调用方法使用this.store.commit(‘方法名称’, 唯一参数)，要传递多个参数可使用对象；
（3）如果对外提供 state 中的数据时需要对数据进行包装，可使用 getters，方法为：this.$store.getters.xxx
let store = new Vuex.Store({
state: {
theUrl: {},
count: 0,
},
mutations: {
increment(state, obj) {
state.count += (obj.a + obj.d)
}
},
getters: {
optCount: function (state) {
return '当前最新的count值是：' + state.count
}
},
}
