vue传值可分为父子之间传值、兄弟组件之间传值、跨代组件之间传值
1.父子之间传值：可以使用$emit/props
伪代码如下
<!-- 父组件 -->
<child :value="value" @changeValue='changeValue'></child>
data() {
return {
value:'parent',
}
},
methods: {
changeValue(val) {
console.log(val)
}
}
<!-- 子组件 -->
<div>
子组件 {{value}}
<button @click="emitValue">传值</button>
</div>
props: ['value'],
methods: {
emitValue() {
this.$emit('changeValue', this.value+'+child')
}
}
2. 兄弟组件之间传值
2.1. 可采用$emit/props ，子1传父，父传子2， 与父子之间传值相似
2.2. 采用vuex存储状态
2.3. eventBus时间车
- eventsBus.$emit 发送数据
- eventBus.$on 监听数据
- eventBus.$off('msg') 取消监听指定事件
- eventBus.$off() 取消监听所有事件
伪代码
// eventBus.js
import Vue from 'vue'
export const eventBus = new Vue()
<template>
<!-- 子1 -->
<div>
child01 {{msg}}
</div>
</template>
<script>
import {eventBus} from '../js/eventBus'
export default {
data() {
return {
msg: ''
}
},
mounted() {
// 先释放监听，避免重复监听
eventBus.$off('child02').$on('child02', val => {
this.msg = val;
})
}
}
</script>
<template>
<!-- 子2 -->
<div>
<button @click="emitBorther">child02</button>
</div>
</template>
<script>
import {eventBus} from '../js/eventBus'
export default {
methods: {
emitBorther() {
eventBus.$emit('child02','我是child02')
}
}
}
</script>
注意
页面销毁时一定要释放监听
监听事件时，需要先释放监听，避免重复监听
3. 跨代组件传值
3.1.采用vuex存储状态
3.2. provide/inject : 一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。
伪代码如下
// 父级组件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// 子组件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}
