vue的组件传值
Posted Lumbago～
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue的组件传值相关的知识，希望对你有一定的参考价值。
**
1.父子传参
**
父子组件传参
2.子组件
在父组件的子组件标签上绑定一个事件，所需要的调用的方法，然后在子组件中通过$emit(‘事件名’,参数)来触发父组件中的方法，是以参数的形式传递的。
3.vuex
vuex我理解的话就是比父子组件传参好用而且好理解，他就是将组件中需要存储的值用this.$store.commit(‘方法名’,数据);给传到vuex中然后用mutations调用这个方法来放在state定义的数据中，然后在其他所有组件内都可以使用这个数据啦。
在组件的方法中使用传到vuex中
this.$store.commit("logintrue", this.trueFalse);
在vuex store的index.js中调用mutation中
logintrue(state, objs)
console.log(objs.trueFalse);
,
4.eventBus（兄弟组件传参）
EventBus Vue中的 事件总线
//首先在main.js种挂载全局EventBus
Vuex.prototype.$EventBus = new Vue()
//然后在A组件的方法中用
Msg()
this.$EventBus.$emit('Msg',"这是组件A发送的消息！")
//然后在B组件的mounted
mounted()
this.$EventBus.$on('sendMsg',(msg)=>
console.log(msg);//这是组件A传递过来的消息！
)
,
5.本地存储
localstorage
sessionstorage
cookies
简单拿localstorage举个例子吧，就是用window.localstorage.setItem(‘名’,参数’’)先把数据存放到里面,然后在其他组件中用window.localstorage.getItem(‘名’,参数’’)；来获取就ok了。
6.全局变量
全局变量的话是在main.js中设置在Vue的原形中定义的变量，在所有的组件中都可以使用全局变量Vuex.prototype.名=值;在组件中直接使用名字即可（我一般名字前会加个 跟 跟 跟router和$store等一致）
7.promise
function doubleUp(value)
return value * 2;
function increment(value)
return value + 1;
function output(value)
console.log(value);// => (1 + 1) * 2
var promise = Promise.resolve(1);
promise
.then(increment)
.then(doubleUp)
.then(output)
.catch(function(error)
// promise chain中出现异常的时候会被调用
console.error(error);
Promise.resolve(1); 传递 1 给 increment 函数
函数 increment 对接收的参数进行 +1 操作并返回（通过return）
这时参数变为2，并再次传给 doubleUp 函数
最后在函数 output 中打印结果
8.this.$refs
“父组件调用子组件中的方法”，并传值；
父组件：
<!--父组件中定义的简单的触发事件-->
<body>
<el-form-item>
<el-button @click="testThisRefs">测试$refs</el-button>
</el-form-item>
</body>
<script>
<!--引入子组件定义 ref="refsChildData"-->
<main-menu ref="refsChildData"></main-menu>
<!--触发的方法事件-->
methods()
testThisRefs()
let data = this.formData.projectItem;
//refsChildData在子组件中事先定义好了，testRefsChildData是子组件中的方法
//data是要传递的参数
this.$refs.refsChildData.testRefsChildData(data);
</script>
子组件：
methods()
testRefsChildData(data)
console.log("---------父组件调用的子组件中的方法：",data)
父组件中点击按钮触发子组件的 testRefsChildData（）方法
9. p a r e n t / parent/ parent/children
父组件：
<template>
<div>
<h1>父组件</h1>
<h-child></h-child>
</div>
</template>
<script>
// 引入子组件
import HChild from './Child'
export default
name: 'Parent',
components:
HChild
,
data ()
return
msg: 'data from parent'
,
methods:
fun ()
console.log('parent fun')
</script>
子组件：
<template>
<div>
<h1>子组件</h1>
<button @click="showParent">调用父组件的数据和方法</button>
</div>
</template>
<script>
export default
name: 'Child',
methods:
showParent ()
// 获取到所有的子组件
console.log(this.$parent)
// 获取指定子组件中的指定数据
console.log(this.$parent.msg)
// 调用子组件的方法
this.$parent.fun()
</script>
10路由传参 query
就是在跳转路由是在url路径后面加上?=‘参数’来传递参数，然后可以用this.route.query.(参数)来接收就行或者监听路由来获取;
还可以在方法中用：
方法名（）
this.$router.push( path: "/goods", query: productID: list );
在组件中用
mounted()
//挂载时 接收一下
var id = this.$route.query.productID;
以上是关于vue的组件传值的主要内容，如果未能解决你的问题，请参考以下文章