Vue.js 2.x | cli-3: доступ к свойствам родительского компонента в дочернем объекте экземпляра - PullRequest
Новая
       34

Vue.js 2.x | cli-3: доступ к свойствам родительского компонента в дочернем объекте экземпляра

0 голосов
/ 10 июля 2019

Предисловие: Vue.js 2.x |Vue Cli-3 |одностраничные компоненты

Обратите внимание: этот вопрос касается доступа к свойствам DOM родительского компонента в объекте экземпляра дочернего компонента.Я НЕ пытаюсь получить доступ к реквизитам родительского компонента: {} (я знаю, как это сделать).

Рассмотрим: простое приложение Vue с компонентами Parent & Child.Компонент Parent импортирует компонент Child. 

<template>
  <div id="app"><Parent /></div>
</template>

<script>
import Parent from './components/Parent.vue';
export default {
  name: 'app',
  components: {Parent}
};
</script>

-------------------------------------

<template>
  <div class="parent"><Child /></div>
</template>

<script>
import Child from './components/Child.vue';
export default {
  name: 'Parent',
  components: {Child}
};
</script>

-------------------------------------

<template>
  <div class="child"></div>
</template>

<script>
export default {name: 'Child'};
</script>

Предположим, что Child требуется доступ к нескольким свойствам Parent до его создания, а именно, offsetTop, offsetLeft и offsetWidth.Согласно Vue Docs - Хуки жизненного цикла экземпляра , они должны быть доступны в объекте экземпляра дочернего компонента.На самом деле это: 

<script>
export default {
  name: 'Child',
  beforeCreate() {
    var p = this;
    console.log(p);
  }
};
</script>

> VueComponent
    $attrs: (...)
    ...
    $parent: VueComponent
      $attrs: (...)
      ...
      $el: div.parent
        accessKey: ""
        ...
        offsetLeft: 200
        offsetTop: 300
        offsetWidth: 300
        ...

this. $ Parent возвращает ожидаемый объект: 

<script>
export default {
  name: 'Child',
  beforeCreate() {
    var p = this.$parent;
    console.log(p);
  }
};
</script>

> VueComponent
      $attrs: (...)
      ...
      $el: div.parent
        accessKey: ""
        ...
        offsetLeft: 200
        offsetTop: 300
        offsetWidth: 300
        ...

однако this. $ Parent. $ El возвращает undefined: 

<script>
export default {
  name: 'Child',
  beforeCreate() {
    var p = this.$parent.$el;
    console.log(p);
  }
};
</script>

> Undefined

Почему это?

...