[Vuejs]-Access higher level component (parent) properties from subsubcomponents (children of children)

by

0👍

✅

I did plenty of fiddling and I have my answer.

So basically, my application passes data into the app from Laravel at the tag level. I have an overall template file for the app which is where I now set the data with a setter to root.

I will explain with some code:

Laravel:

<v-app token="abcdefg">
    <template></template>
</v-app>

Thats the declaration of data passed into the app

On template.vue:

<script>
  export default {
    name: "template",
    created() {
        this.$root.setToken(this.$parent.$attrs.token);
    }
  }
</script>

We access the data and use the setter placed on app.js (root) to assign the data to an accessible $root location

app.js code:

const app = new Vue({
  data() {
      return {token: ''}
  },

  moment,vuetify,
  router, store,

  el: '#app',
  methods: {
      setToken(token)
      {
          this.token = token;
      },
      getToken()
      {
          return this.token;
      }
  }
});

A getter and setter available for the whole app to access. I may restrict access to the setter function later on but for now I am happy it works. Suggestions on restricting this will be nice.

Its now accessible via: this.$root.getToken()

Leave a comment