使用VUE开发有一段时间了，一直都没有整理一下相关知识，今天总结下开发过程中所遇到的一些坑，主要给大家总结一下VUE组件传值的几种常用方法：
1，路由传参（参数，可以查询）：
这种传参方式个人比较喜欢（也比较常用吧）它只需要在路由跳转的时候将对应的参数以对象的形式写入：
this.$router.push({name: 'routePage',query/params: { routeParams: params }})这样使用起来很方便，但url会变得很长，而且如果不是使用路由跳转的界面无法使用对应的取值方式分别为：
this.$route.params.paramName || this.$route.query.paramName需要注意的是，实用params去传值的时候，在页面刷新时，参数会消失，用查询则不会有这个问题。
注：使用PARAMS传值，也可以做到页面刷新，参数不丢失，不过在命名路由时需要在路径这样设置：
{
path: '/test1/:orderId/:type',
name: 'test1',
component: test1
}使用时
this.$router.push({name: 'test2', params: {orderId: id, type: 'buy'}})2，父子通信
子传父：
子组件child.vue
<template>
<div class="child">
<h1>子组件</h1>
<button v-on:click="toParents">向父组件传值</button>
</div>
</template>
<script>
export default{
name: 'child',
data(){
return {}
},
methods: {
toParents(){
this.$emit("toParentsMsg", "子组件向父组件传值");
}
}
}
</script>
<style>
</style>父组件：parents.vue
<template>
<div class="parents">
<h1>父组件</h1>
<Child v-on:toParentMsg="childToParentMsg" ></Child>
</div>
</template>
<script>
import Child from './child/child.vue'
export default{
name:"parents",
data(){
return {
}
},
methods: {
childToParentMsg:function(data){
alert("父组件显示信息："+data)
}
},
components: {Child}
}
</script>
<style>
</style>父传子：
子组件：child.vue
<template>
<div class="child">
<h1>子组件</h1>
<span>子组件显示信息：{{toChild}}</span><br>
</div>
</template>
<script>
export default{
name: 'child',
data(){
return {}
},
props:["toChild"]
}
</script>
<style>
</style>父组件：parents.vue
<template>
<div class="parents">
<h1>父组件</h1>
<Child v-bind:toChild="parentMsg"></Child>
</div>
</template>
<script>
import Child from './child/child.vue'
export default{
name:"parents",
data(){
return {
parentMsg:'父组件向子组件传值'
}
},
components: {Child}
}
</script>
<style>
</style>3，eventbus（非父子（同级）组件之间）
使用eventbus的方法很是简单，我们需要做三步事情，
3.1，创造一个容器去充当我们的eventbus：
在main.js全局定义一个eventBus
window.eventBus = new Vue()3.2，抛出，或者说提交事件（eventBus。$发出）
组件一
<template>
<div class="mybustest1">
<button @click="get">点击发送数值到eventbus中</button>
</div>
</template>
<script>
export default {
name: "mybustest1",
methods: {
get: function() {
console.log("Aaa");
eventBus.$emit('eventBusName', "mytestvalue");
}
},
}
</script>
<style>
</style>
第三步，监听事件eventBus。$上上
组件2
<template>
<div class="mybustest2">
<button @click="method1">点击console.log出eventbus的信息
</button>
</div>
</template>
<script>
export default {
name: "mybustest2",
data(){
return {
diplay:false
}
},
methods: {
method1: function() {
//使用on来监听事件
eventBus.$on('eventBusName', function(val) {
console.log("这个是mybustest2的val值为："+val)
})
}
}
}
</script>
<style>
</style>
查看效果
在App.vue中引入，先点击<mybustest1 />传入mytestvalue，再点击<mybustest2 />接收，然后再次点击<mybustest1 />查看控制台打印值是否传入
<template>
<div id="app">
<router-view/>
<mybustest1/>
<mybustest2/>
</div>
</template>
<script>
import mybustest2 from "./components/mybustest2"
export default {
name: 'App',
components:{
mybustest2
}
}
</script>
<style>
#app {
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
以上就是个人对VUE组件传值对一点点小理解，希望大家多多指正