如何直接在组件中访问“布局”或“页面”功能？

Question

如何直接在组件中访问布局或页面功能？是否有像$root或$parent这样的特殊变量？

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLmltZ3VyLmNvbS9yWTFUcTNOLnBuZyJ9” alt =“结构”>

我找到了一种方法，但是似乎很脏。我使用Vue DevTool看到了组件结构，发现布局是根的子级，因此我这样调用布局的函数：

this.$root.$children[2].getMap()

有更清洁的方法吗？

Answer 1

您可以为此使用Vue的provide/inject功能。例如，页面/布局可以provide inject：

provide

...然后该页面/布局上的任何子组件都可以在需要的地方getMap()该方法：

<template>
  <MapButton />
</template>

<script>
export default {
  name: 'MapPage',
  provide() {
    return {
      getMap() {
        return { /* map */ }
      }
    }
  }
}
</script>