如何在轻量化Vue项目中让Home组件使用父组件的test变量？

背景说明 #

包含Home组件的App组件通过WebSocket连接获取test变量的值，当前项目使用Vue Router进行路由管理，且部署在微控制器上，要求应用尽可能轻量化，不导入额外依赖。相关代码如下：

现有代码 #

App组件代码 #

<template>
  <v-app id="inspire">
    <v-navigation-drawer v-model="drawer" app clipped>
      <v-list dense>
        <v-list-tile to="/">
          <v-list-tile-action>
            <v-icon>home</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Home</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile to="/settings">
          <v-list-tile-action>
            <v-icon>settings</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Settings</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>

    <v-content>
      <v-container fluid fill-height>
        <router-view></router-view>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      test: '0'
    }
  },

  mounted: function () {
    console.log("Starting connection to WebSocket Server")
    this.connection = new WebSocket("...")
    
    // 修正：原普通函数会导致this指向WebSocket实例，改为箭头函数绑定Vue组件上下文
    this.connection.onmessage = (event) => {
      this.test = event.data
    }
  }
}
</script>

Router组件代码 #

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
  ]
})

Home组件代码 #

<template>
  <!-- 需要在这里使用test变量 -->
</template>

<script>
export default {
  data() {
    return {
      // 自定义数据
    };
  },
}
</script>

解决方案（轻量化，无额外依赖） #

方案1：通过router-view传递Props（推荐） #

这是Vue父子组件传值的标准方式，逻辑清晰易维护：

1. 修改App组件中的router-view，绑定test作为props：

<router-view :test="test"></router-view>

2. 在Home组件中声明接收test并使用：

<template>
  <div>当前test的值：{{ test }}</div>
</template>

<script>
export default {
  props: ['test'], // 声明接收test prop
  data() {
    return {
      // 自定义数据
    };
  },
}
</script>

方案2：直接通过$parent访问（适合层级简单场景） #

当前路由结构下App是Home的直接父组件，可直接访问父组件变量：

<template>
  <div>当前test的值：{{ $parent.test }}</div>
</template>

<script>
export default {
  data() {
    return {
      // 自定义数据
    };
  },
}
</script>

方案3：使用Vue内置事件总线 #

利用Vue实例实现事件通信，无需额外依赖：

1. 修改App组件的WebSocket回调，更新test时触发事件：

mounted: function () {
  console.log("Starting connection to WebSocket Server")
  this.connection = new WebSocket("...")
  
  this.connection.onmessage = (event) => {
    this.test = event.data
    // 触发全局事件，传递最新值
    this.$root.$emit('test-updated', this.test)
  }
}

2. 在Home组件中监听事件并同步值：

<template>
  <div>当前test的值：{{ localTest }}</div>
</template>

<script>
export default {
  data() {
    return {
      localTest: '0' // 初始值与App保持一致
    };
  },
  mounted() {
    // 监听事件更新本地变量
    this.$root.$on('test-updated', (newValue) => {
      this.localTest = newValue
    })
  },
  beforeDestroy() {
    // 组件销毁前移除监听，避免内存泄漏
    this.$root.$off('test-updated')
  }
}
</script>

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