Use data from parent in child

How can I use the value of the variable test in the component Home?

This is the component which includes Home. Here I get the value of test via a websocket connection. Note that I am using a router as shown below.

 <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-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.connection.onmessage = function (event) {
          this.test = event.data
        }
      }
    
    </script>

This i how the router component looks like:

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
    },

  ]
})

The component home in which I need the value of test looks like this.

  <template>
      //template using the test variable
    </template>
    
    <script>
    
    export default {
      data() {
        return {
          //some data
        };
      },
    
    </script>

As the website is hosted by a microcontroller, the application should be as small as possible. Therefore importing something is not the best option for me.

To pass data from parent to child you use props.

In the parent template you use v-bind the prop name and then the value or values from the parent you want to pass. v-bind:test-data="test" The value can be any type from a string to an array or an object.

...
<v-content>
  <v-container fluid fill-height>
     <router-view v-bind:test-data="test"></router-view>
  </v-container>
</v-content>
...

In your child receive the props. Note the change from kabab-case to camelCase

export default {
   name: 'Home',
   props: ['testData'],
   
   // do something with the testData

      created () {
        console.log(this.testData)
      }

   }



</details>