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傳父畦幢，父?jìng)髯?， 與父子之間傳值相似
2.2. 采用vuex存儲(chǔ)狀態(tài)
2.3. eventBus時(shí)間車
- eventsBus.$emit 發(fā)送數(shù)據(jù)
- eventBus.$on 監(jiān)聽數(shù)據(jù)
- eventBus.$off('msg') 取消監(jiān)聽指定事件
- eventBus.$off() 取消監(jiān)聽所有事件
偽代碼
// 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() {
// 先釋放監(jiān)聽喻粹，避免重復(fù)監(jiān)聽
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>
注意
頁(yè)面銷毀時(shí)一定要釋放監(jiān)聽
監(jiān)聽事件時(shí)朴译，需要先釋放監(jiān)聽井佑，避免重復(fù)監(jiān)聽
3. 跨代組件傳值
3.1.采用vuex存儲(chǔ)狀態(tài)
3.2. provide/inject : 一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深眠寿，并在其上下游關(guān)系成立的時(shí)間里始終生效躬翁。
偽代碼如下
// 父級(jí)組件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// 子組件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}
