問題陳述
我有兩個組成部分究流。我將數(shù)據(jù)從一個組件傳遞到另一個組件辣吃。接收方應顯示接收的數(shù)據(jù)
創(chuàng)建新的Vue應用程序
要創(chuàng)建新的Vue CLI應用程序，請運行以下命令芬探。確保已安裝Vue CLI神得。
//安裝Vue CLI，如果你還沒安裝它
$ npm install -g @ vue / cli
//創(chuàng)建Vue App
$ vue init webpack <project-name>
//啟動項目
$ npm run dev
創(chuàng)建組件
現(xiàn)在我將創(chuàng)建兩個組件偷仿。其中一個將是發(fā)布者哩簿，另一個將是訂閱者。名為Leftside.vue和訂閱者的發(fā)布者的組件是Rightside.vue酝静。
Leftside.vue
<template>
<div class="left-side">
<div class="content">
<div>
<label for="location"> Location </label>
<input type="text" name="location" v-model="location" />
</div>
<div>
<label for="caption"> Caption </label>
<input type="text" name="caption" v-model="caption" />
</div>
<input type="submit" v-on:click="sendData" value="Send">
</div>
</div>
</template>
<script>
export default {
data () {
return {
location: '',
caption: ''
}
},
methods: {
sendData () {
return ''
}
}
}
</script>
<style scoped>
.left-side {
width: 50%;
height: 500px;
float: left;
background-color: #35495e;
}
input[type=submit] {
width: 100%;
background-color: #42b883;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
</style>
Rightside.vue
<template>
<div class="right-side">
<div class="content">
<p> {{ data.location }} </p>
<p> {{ data.caption }} </p>
</div>
</div>
</template>
<script>
export default {
data () {
return {
data: {
location: 'Location placeholder',
caption: 'Payload placeholder'
}
}
},
methods: {
}
}
</script>
<style scoped>
.right-side {
width: 50%;
height: 500px;
float: right;
background-color: #42b883;
border: 1px;
border-color: black;
}
</style>
然后創(chuàng)建home.vue,在引入并使用這些組件节榜。
WX20190801-172044@2x.png
下一步是將Vue實例創(chuàng)建為事件總線。現(xiàn)在别智，在您的/src目錄中創(chuàng)建一個新文件宗苍，命名它eventBus.js。eventBus.js非常簡單薄榛，我們只需要兩行代碼
import Vue from 'vue'
export default new Vue()
接下來我們將eventBus.js在我們的組件中使用它
Leftside.vue
<template>
....
</template>
<script>
import EventBus from '../eventBus'
export default {
data () {
return {
location: '',
caption: ''
}
},
methods: {
sendData () {
const payload = {
location: this.location,
caption: this.caption
}
EventBus.$emit('DATA_PUBLISHED', payload)
}
}
}
</script>
<style scoped>
....
</style>
Rightside.vue
<template>
....
</template>
<script>
import EventBus from '../eventBus'
export default {
data () {
return {
data: {
location: 'Location placeholder',
caption: 'Payload placeholder'
}
}
},
methods: {
updateData (payload) {
this.data = payload
}
},
mounted () {
EventBus.$on('DATA_PUBLISHED', (payload) => {
this.updateData(payload)
})
}
}
</script>
<style scoped>
....
</style>
在每個組件中導入eventBus.js讳窟。EventBus用作消息代理的對象。
發(fā)布
Leftside.vue
EventBus.$emit(‘DATA_PUBLISHED’, payload)
該emit()方法用于發(fā)布消息敞恋。它接收兩個參數(shù)丽啡。第一個是事件名稱，第二個是要傳遞的數(shù)據(jù)硬猫。
訂閱
Rightside.vue
EventBus.$on('DATA_PUBLISHED', (payload) => {
this.updateData(payload)
})
該on()方法用于監(jiān)聽EventBus上接收兩個參數(shù)的事件补箍。第一個是事件名稱倚评，第二個是回調(diào)方法。
該DATA_PUBLISHED事件名稱用于標識發(fā)布者發(fā)布和訂閱者訂閱的事件馏予。
其他
- off()用于刪除訂閱的事件
- once()用于訂閱事件但只觸發(fā)一次天梧。訂閱者觸發(fā)后，訂閱將被刪除霞丧。
