組件通信總結
父傳子：
props: [args]
子傳父：this.$emit(event, args)
兄傳弟：vm.$on(event, function (data) {}
Foo.vue 父組件
<template>
<div class="tmpl">
<h1>父子組件與兄弟組件通信</h1>
<h3>子組件通信為 {{childMsg}}</h3>
<my-bar :message="parentMsg" v-on:showMsg="getMsg"></my-bar>
<my-baz></my-baz>
</div>
</template>
<script>
import MyBar from '@/components/Foo/Bar.vue'
import MyBaz from '@/components/Foo/Baz.vue'
export default {
name: 'Foo',
components: {
MyBar, MyBaz
},
data () {
return {
parentMsg: 'abc123',
childMsg: ''
}
},
methods: {
getMsg: function (data) {
this.childMsg = data
}
}
}
</script>
<style scoped>
h1 {
font-weight: normal;
}
</style>
Bar.vue 子組件（兄）
<template>
<div class="tmpl">
<h1>父組件傳值為 {{message}}</h1>
<input type="text" placeholder="請輸入子組件內(nèi)容" v-model="param">
<button @click="sendParam">通信父組件</button>
</div>
</template>
<script>
import EventHandler from '@/assets/js/EventHandler.js'
export default {
name: 'Bar',
props: {
message: {
type: String,
default: '默認為空'
}
},
data () {
return {
param: ''
}
},
methods: {
sendParam: function () {
var param = this.param
this.$emit('showMsg', param)
EventHandler.$emit('showMsg', param)
}
}
}
</script>
<style scoped>
h1 {
font-weight: normal;
}
.tmpl {
border: 1px solid #333;
padding: 30px;
}
</style>
Baz.vue 子組件（弟）
<template>
<div class="tmpl">
<h1>Baz</h1>
<h1>兄弟組件通信為{{brotherMsg}}</h1>
</div>
</template>
<script>
import EventHandler from '@/assets/js/EventHandler.js'
export default {
name: 'Baz',
mounted () {
var that = this
EventHandler.$on('showMsg', function (data) {
that.brotherMsg = data
})
},
data () {
return {
brotherMsg: ''
}
}
}
</script>
<style scoped>
h1 {
font-weight: normal;
}
</style>
EventHandler.js 用于兄弟組件之間傳遞事件
import Vue from 'Vue'
export default new Vue()
image.png
點擊按鈕后通信
