'How to access the root component data from a child template in VueJs?

Is is possible to access this.$root from within a template in VueJs ?

Example:

<template>
    <v-card elevation="this.$root.$refs.foo.cardElevation">
      Foo
    </v-card>
</template>

I know I can add a property in the data object and point that to $root.cardElevation, but since I'm going to have many components use this value I'd like to be able to access it directly from the template.



Solution 1:[1]

I don't think access to the root component in such a way is possible and also not the best approach, instead created a config file, imported it and had a data property get the desired config from the configuration file.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 code4jhon