vue2组件通信方式
-
父子组件通信（props）
-
子父组件通信（$emit）
-
兄弟组件通信（Event Bus）
-
vuex
-
provide/inject
父子组件通信
## Parent组件 ## Child组件
<div>
<Child :strData="strData"></Child>
</div>
<script>
export default {
data() {
return {
strData: '我是父组件Parent中的数据'
}
}
}
</script>
## Child
<div>
<p>{{ strData }}</p>
</div>
<script>
export default {
props: {
strData: {
type: String,
default: ''
}
}
}
</script>
子父组件通信
## Parent ## Child
<div>
<Child @getChildData="updateChild"></Child>
</div>
<script>
export default {
methods: {
updateChild(val) {
console.log(val) // 子组件的数据
}
}
}
</script>
## Child
<div>
<button @click="btnFn">点击将数据广播到父组件</button>
</div>
<script>
export default {
data() {
return {
childData: '我是子组件中的数据'
}
},
methods: {
btnFn() {
this.$emit('getChildData', this.childData)
}
}
}
</script>
兄弟组件间通信
## Child1 ## Child2 ## bus.js
## bus.js
import Vue from 'Vue'
export default new Vue()
## Child1
<div>
<button @click="toChild2">点击将我的数据传给child2组件</button>
</div>
<script>
import bus from 'bus.js'
export default {
data() {
return {
child1Data: '我是child1组件数据'
}
},
methods: {
toChild2() {
bus.$emit('getChild1Data', this.child1Data)
}
}
}
</script>
## Child2
<div>
<p>{{ str }}</p>
</div>
<script>
import bus from 'bus.js'
export default {
data() {
return {
str: ''
}
},
created() {
bus.$on('getChild1Data', val => {
console.log(val) // child1组件中定义的事件
this.str = val
})
}
}
</script>
vuex实现任意组件间通信
## Child1 ## Child2 ## store.js
## store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
globalMessage: ''
},
getters:{},
mutations:{
setMessage(state, message) {
state.globalMessage = message
}
},
actions:{}
})
## Child1
<div>
<button @click="sendMessage">点击我给store中存数据</button>
</div>
<script>
export default {
methods: {
sendMessage() {
this.$store.commit('setMessage', 'I am globalMessage')
}
}
}
</script>
## Child2
<div>
<p>{{ $store.state.globalMessage }}</p>
</div>
provide/inject祖先和后代组件间通信
## Parent ## Child
<div>
<p>我是祖先组件</p>
</div>
<script>
export default {
provide() {
return {
val: '我是从祖先组件 provide下来的数据'
}
}
}
</script>
## Child
<div>
<p>{{ val }}</p>
</div>
<script>
export default {
inject: ['val']
}
</script>
