问题陈述
我有两个组成部分。我将数据从一个组件传递到另一个组件。接收方应显示接收的数据
创建新的Vue应用程序
要创建新的Vue CLI应用程序，请运行以下命令。确保已安装Vue CLI。
//安装Vue CLI，如果你还没安装它
$ npm install -g @ vue / cli
//创建Vue App
$ vue init webpack <project-name>
//启动项目
$ npm run dev
创建组件
现在我将创建两个组件。其中一个将是发布者，另一个将是订阅者。名为Leftside.vue和订阅者的发布者的组件是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>
然后创建home.vue,在引入并使用这些组件。
WX20190801-172044@2x.png
下一步是将Vue实例创建为事件总线。现在，在您的/src目录中创建一个新文件，命名它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用作消息代理的对象。
发布
Leftside.vue
EventBus.$emit(‘DATA_PUBLISHED’, payload)
该emit()方法用于发布消息。它接收两个参数。第一个是事件名称，第二个是要传递的数据。
订阅
Rightside.vue
EventBus.$on('DATA_PUBLISHED', (payload) => {
this.updateData(payload)
})
该on()方法用于监听EventBus上接收两个参数的事件。第一个是事件名称，第二个是回调方法。
该DATA_PUBLISHED事件名称用于标识发布者发布和订阅者订阅的事件。
其他
- off()用于删除订阅的事件
- once()用于订阅事件但只触发一次。订阅者触发后，订阅将被删除。
