vue.jpg
在vue組件的使用中，相互間的傳值是普遍的現(xiàn)象，不管是父子組件間，兄弟組件間，亦或是更深層次關(guān)系組件間都是必不可少的
props/$emit
這是我們平時開發(fā)中用得最多的一種通信方式，子組件通過props屬性獲取父組件傳來的對應(yīng)數(shù)據(jù)，子組件通過$emit向父組件發(fā)送消息
// 父組件
<template>
<div class="hello">
<Content :name="kobe" @message="childrenMessage"></Content>
</div>
</template>
<script>
import Content from './Content'
export default {
name: 'HelloWorld',
methods: {
childrenMessage (msg) {
alert('我接受到了，子組件你上傳的信息是' + msg)
}
},
components: {
Content
}
}
</script>
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
// 子組件
<template>
<div class="content">
<button @click="btnClick">{{name}}老鐵，點擊我一下下</button>
</div>
</template>
<script>
export default {
name: 'Content',
props: {
name: {
type: String,
default: ''
}
},
methods: {
btnClick () {
this.$emit('message', '嘿，我向上傳遞信息了')
}
}
}
</script>
<style scoped>
.content {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
父子之間通信推薦
$$emit/$on
當(dāng)兄弟組件之間需要傳值的時候我們通常會用eventBus來實現(xiàn)，這個方法使通過創(chuàng)建一個vue實例，當(dāng)做$emit事件的處理中心來觸發(fā)監(jiān)聽事件
// eventBus.js
import Vue from 'vue';
export default new Vue();
// content.vue
<template>
<div class="content">
<button @click="btnClick">{{name}}老鐵，點擊我一下下</button>
<span>content2向我傳的是： {{siblingMsg}}</span>
</div>
</template>
<script>
import bus from '../config/bus'
export default {
name: 'Content',
data () {
return {
siblingMsg: ''
}
},
props: {
name: {
type: String,
default: ''
}
},
methods: {
btnClick () {
this.$emit('message', '嘿，我向上傳遞信息了')
}
},
mounted () {
bus.$on('siblingMsg', msg => {
this.siblingMsg = msg
})
},
destroyed () {
bus.$off('siblingMsg')
}
}
</script>
<style scoped>
.content {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
// content2.vue
<template>
<div class="content2">
<h1>我是content2組件</h1>
<button @click="btnClick">{{name}}老鐵，點擊我一下下</button>
<button @click="siblingMsg">我要向content傳值</button>
</div>
</template>
<script>
import bus from '../config/bus'
export default {
name: 'Content',
props: {
name: {
type: String,
default: ''
}
},
methods: {
btnClick () {
this.$emit('message', '嘿，我content2向上傳遞信息了')
},
siblingMsg () {
bus.$emit('siblingMsg', '來啊，互相傷害啊')
}
}
}
</script>
<style scoped>
.content2 {
width: 200px;
height: 200px;
background-color: rgb(255, 145, 0);
}
</style>
使用eventbus的時候監(jiān)聽事件寫在mounted()中且在destroyed要銷毀，不然會造成變量污染
$$parent/$children
children可以遍歷全部子組件。也可以借助ref來訪問
provide/inject
通信方式是從上到下，不需要從下往上
// A.vue
export default {
provide: {
name: 'kobe bryant'
}
}
// B.vue
export default {
inject: ['name'],
mounted () {
console.log(this.name); // 'kobe bryant
}
}
vuex
雖然說vuex也可以做組件通信的事，但是未免有點浪費了，vuex還是做一些狀態(tài)管理比較好。像登錄信息什么的
