代码之家 › 专栏 › 技术社区 › Yung Silva

如何使用父组件指令-VueJS

vue.js-directives vue-component vue.js javascript

Yung Silva · 技术社区 · 5 年前

<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'"

提前谢谢