Vue多实例间变量引用与双向互引用问题咨询

嘿，我来帮你梳理这两个关于Vue多实例的问题！

首先明确：是可以直接调用的。比如你把两个实例都挂载到全局变量上，在aside实例的模板里直接写v-model="footer.companyname"，或者在aside的方法里用footer.companyname来访问/修改数据，语法上是可行的。但这种方式真的不推荐，弊端一大堆：

• 耦合度拉满：两个实例直接绑定，只要其中一方的变量名、结构改了，另一方就得跟着改，后期维护简直是噩梦，完全违背了Vue组件化低耦合的设计初衷。
• 数据流向混乱：Vue本身推崇单向数据流，这种跨实例的直接双向绑定，会让数据变更的追踪变得异常困难——哪天数据莫名其妙变了，你根本查不出是哪个实例改的。
• 扩展性极差：以后要加新实例、重构代码，这种硬编码的引用会让重构成本飙升，组件也没法轻松复用。
• 调试难度大：出问题的时候，你得同时盯着两个实例的代码，排查起来效率极低。

你遇到的报错是因为JS是自上而下执行的：当你初始化aside实例的时候，footer变量还没被声明赋值，所以自然会报undefined。要实现双向引用，有几种更合理的方式：

方法1：先声明变量，后初始化实例 #

先把两个实例的变量提前声明，再依次初始化，这样在aside的生命周期钩子（比如mounted）里就能访问到已经初始化完成的footer了。如果要在模板里用，记得把footer挂载到aside的data中：

// 先提前声明变量
var aside, footer;

aside = new Vue({
  el: "aside",
  data: {
    name: "Peylan",
    footer: null // 预留位置
  },
  mounted() {
    // 此时footer已经初始化完成，挂载到当前实例的data里
    this.footer = footer;
    // 现在模板里就能用{{ footer.companyname }}或者v-model="footer.companyname"了
  }
});

footer = new Vue({
  el: "footer",
  data: {
    companyname: "Company Inc"
  },
  mounted() {
    // 同理，这里也能访问aside实例
    console.log(aside.name);
  }
});

方法2：用事件总线（Event Bus）解耦通信 #

这是Vue中跨组件/实例通信的常用方式，不需要直接引用实例，而是通过一个中间的空Vue实例来传递事件和数据，彻底解耦：

// 创建一个空的Vue实例作为事件总线
const eventBus = new Vue();

var aside = new Vue({
  el: "aside",
  data: { name: "Peylan" },
  methods: {
    // 向footer发送数据
    sendNameToFooter() {
      eventBus.$emit('update-company-name', this.name);
    }
  },
  mounted() {
    // 监听footer发来的事件
    eventBus.$on('send-company-to-aside', (companyName) => {
      console.log('footer传来的公司名：', companyName);
    });
  }
});

var footer = new Vue({
  el: "footer",
  data: { companyname: "Company Inc" },
  mounted() {
    // 监听aside发来的事件
    eventBus.$on('update-company-name', (name) => {
      this.companyname = name;
    });
    // 向aside发送数据
    eventBus.$emit('send-company-to-aside', this.companyname);
  }
});

方法3：用Vuex管理全局状态（适合复杂场景） #

如果你的项目比较复杂，有多个实例需要共享数据，直接用Vuex来管理全局状态更合适。把需要共享的数据放到Vuex的store里，两个实例都从store读取和修改数据，完全不需要互相引用，数据流向清晰可控。

内容的提问来源于stack exchange，提问作者chickens