Use data from parent in child

Question

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.

Answer 1

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

   }