如何使用父组件指令-VueJS

Question

我想在组件上设置指令，并在子组件内部使用它代替<slot/>，如下例所示

GridLayout.vue

<template>
  <div class="grid">
    <slot />
  </div>
</template>

<script>
export default {
  directives: {
    'grid-area': {
      bind: function (el, binding, vnode) {
        el.style.gridArea = binding.value
      }
    }
  },
}
</script>

ChildComponent.vue

<template>
  <GridLayout>

    <Nav v-grid-area="'nav'" />
    <Content v-grid-area="'content'" />
    <MyFooter v-grid-area="'footer'" />

  </GridLayout>
</template>

但是那样行不通。

您应该考虑“为什么不全局声明该指令？”

因为我想将所有规则，与网格布局相关的逻辑都保留在一个隔离的组件中。

有什么方法可以访问父组件指令？

像this.$parent.v-grid-area="'status'"

预先感谢