场景:A组件有个点击按钮,点击后是跳转到B组件,在C组件的页面显示;C组件引用了B组件。
A组件:(传递者)
<Button type="primary" @click="preView">保存</Button>
|
preView() { let res = this.judgeEmpty(); if (!res.status) { return this.$Message.error(res.message); } if (this.isAudioUpload || this.isVideoUpload) { this.$Message.error("请等待文件上传完成"); return; } this.preViewData = this.dataArrange(); this.preViewShow = true; this.sendDataToFirstComponent(); },
|
sendDataToFirstComponent() { this.$bus.$emit('update-preview-data', this.preViewData, this.filePath, this.tags); console.log(this.preViewData, this.filePath, this.tags) },
|
B组件不用管
C组件:(接收者)
<previewVue ref="preView" :preViewData="preViewData" :filePath="filePath" :tags="tags"></previewVue>
|
created() { this.$bus.$on('update-preview-data', this.updatePreviewData); }, beforeDestroy() { this.$bus.$off('update-preview-data', this.updatePreviewData); },
|
updatePreviewData(preViewData, filePath, tags) { this.preViewData = preViewData; this.filePath = filePath; this.tags = tags; console.log(5,this.preViewData); console.log(55,this.filePath); console.log(555,this.tags); },
|
在main.js中挂载bus总线
const bus = new Vue(); Vue.prototype.$bus = bus;
|