$ refs.myChildComponent не определен, хотя я вижу его в консоли - PullRequest
Новая
       5

$ refs.myChildComponent не определен, хотя я вижу его в консоли

0 голосов
/ 11 октября 2019

В моем дочернем компоненте у меня есть две функции: 

methods: {
  tutu: function () {
    ...
  },
  openMenu: function () {
    ...
  }
}

В моем родительском компоненте я пытаюсь выполнить каждую из этих функций в ответ на различные события: 

methods: {
  openMenu: function () {
    this.$refs.main_menu.openMenu();
  },
  handleResize: function () {
    this.$refs.main_menu.tutu();
  }
},

Первый вызов (this.$refs.main_menu.openMenu()) работает нормально, но второй сбой с этим сообщением об ошибке:

TypeError: Невозможно прочитать свойство 'пачка' неопределенного

В моем родительском компоненте console.log(this.$refs) показывает обе функции одинаково. РЕДАКТИРОВАТЬ: console.log(this.$refs.main_menu) показывает undefined.

Я не могу понять, почему один из них работает, а не другой, если все одинаково для обоих. 

main_menu: VueComponent
...
openMenu: ƒ ()
arguments: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.invokeGetter (<anonymous>:2:14)]
caller: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.invokeGetter (<anonymous>:2:14)]
length: 0
name: "bound openMenu"
...
tutu: ƒ ()
arguments: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.invokeGetter (<anonymous>:2:14)]
caller: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.invokeGetter (<anonymous>:2:14)]
length: 0
name: "bound tutu"
__proto__: ƒ ()

1 Ответ

0 голосов
/ 11 октября 2019

$refs будет заполняться только после монтажа компонента. Поэтому, если вы попытаетесь получить доступ к ref до этого, например, с помощью created ловушки, его там не будет.

Существуют и другие способы, которыми ref может отсутствовать. Например, если вы используете v-if, а условие - false. В этом случае недостаточно дождаться, пока условие станет true, вам также нужно будет дождаться выполнения обновления рендеринга, и такие обновления будут поставлены в очередь. В этом случае вам нужно либо использовать ловушку updated, либо вызвать $nextTick.

...