本文共 1209 字，大约阅读时间需要 4 分钟。

扩展连接

父子组件间传值：

发布者-订阅者模式：

方式一、通过sessionStorage

优点：无需通过任何事务触发；随时随地获取，不受组件间关系限制

// 存入，在A.vuewindow.sessionStorage.setItem('currentID', this.currentID)// 取出，在B.vuethis.id = window.sessionStorage.getItem('currentID')

方式二、通过eventBus

转自：

注意：需要通过 click 事件触发

接下来的示例中，ParentCard组件包含了SisterCard和BrotherCard两个子组件，而且这两个子组件是兄弟组件。

首先在main.js文件中定义一个新的eventBus对象，其实他是一个全新的Vue实例：export const eventBus = new Vue()

// main.jsimport Vue from 'vue'import App from './App' export const eventBus = new Vue() new Vue({
       el: '#app',    render: h => h(App)})

接着在新创建的BrotherCard组件中：

// BrotherCard.vue
   

在SisterCard组件中：

参考自：

// SisterCard.vue

经测试，效果如下：

• eventBus.$on 在 mounted 和 create 中均可以实现获取参数，具体根据你的需要来写
• 无论 eventBus.$on 写在 mounted 中还是 create 中，DOM 渲染结束之后均不能实现数据显示在页面上（如果想要刷新页面即显示数据，可以用 sessionStronge 来实现）

方式三、通过同一父组件

转自：

接下来的示例中，ParentCard组件包含了SisterCard和BrotherCard两个子组件，而且这两个子组件是兄弟组件。

首先创建ParentCard组件：在ParentCard的中定制了一个@sisterSaid事件侦听器，它触发了messageSon()方法。所以父组件在这两个兄弟组件之间起到了传递的作用。

// ParentCard.vue
   

创建SisterCard组件：

// SisterCard.vue
    

接着创建BrotherCard组件：

// BrotherCard.vue
    

转载地址：https://blog.csdn.net/qq_41956139/article/details/104598942 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！