从子组件(子组件的子组件)访问高级组件(父级)属性(子组件的子组件)

Question

我正在做一些需要访问在VueJS应用程序顶层注入的属性的事情。我可以通过以下方式访问该属性：

this.$parent.$attrs.propertyname

但是，这很好，我现在希望能够从另一个子组件中访问相同的项，该子组件与上面的附加$parent调用一样工作。有什么办法我可以用另一种方式把这个项目称为最高层吗？

我看过$root，并在浏览器中使用Vue $vm控制台调用进行了测试，但到目前为止还没有工作。我怀疑有一种非常简单的方法来做这件事，但我目前找不到。

我试过：

从顶层添加一个返回方法，并在顶级的vue应用程序外部调用it

• $root

• setting一个原型: Vue.prototype.$varname = '‘，然后尝试为这个.$varname= this.mypropertyname

分配创建的()

我怀疑我在某个地方，或者我错过了一些东西。

Answer 1

我做了很多摆弄，我有我的答案。

因此，基本上，我的应用程序在标签级别将数据从Laravel传递到应用程序。我有一个应用程序的整体模板文件，现在我用setter将数据设置为root。

我将用一些代码来解释：

拉勒维尔：

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

这是传递给应用程序的数据声明。

在template.vue上：

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

我们访问数据，并使用放置在app.js (根)上的设置器将数据分配到可访问的$root位置。

app.js代码：

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

  moment,vuetify,
  router, store,

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

一个getter和setter可供整个应用程序访问。稍后我可能会限制对setter函数的访问，但现在我很高兴它能工作。关于限制这一点的建议会很好。

它现在可以通过: this.$root.getToken()访问