данные расширенного компонента не определены при использовании в данных расширяющего компонента

Question

Допустим, у меня есть компонент (один файловый компонент):

// Cat.vue
export default {
    data() {
        return {
            actionsPredefined: {
                eat () => (console.log('eat')),
                purr () => (console.log('purr')),
                meow () => (console.log('meow')),
            }
        }
    }
}

, который расширен на:

// Lion.vue
export default {
    extends: Cat,

    data() {
        return {
            actions: {
                eat: this.actionsPredefined.eat, // is undefined - why?
                purr: this.actionsPredefined.purr, // is undefined - why?
                roar () => (console.log('roar'))
            }
        }
    }
}

Теперь, когда я использую Lion.vue, я получаю:

[Vue warn]: Ошибка в data (): «Ошибка типа: Ошибка чтения свойства« есть »из неопределенного» * ​​1010 *

Похоже, this.actionsPredefined не определено в Lion.вю.

Как правильно выбрать выборочное объединение actionsPredefined расширенного компонента (Cat.vue) с actions расширяющего компонента (Lion.vue)?

В Lion.vue,когда я перемещаю actions из data в computed Vue знает, что такое this.actionsPredefined, но я не могу переместить его в computed (потому что мне нужно иметь возможность изменить actions другими методами и изменить вычисленные значения... явно против идеи использования вычисленных значений и не будет работать).

Я также могу установить actions пусто в Lion.vue данных и заполнить их только с помощью predefinedActions в created() hookи это будет работать, но почему-то это не похоже на правильный способ сделать это.

Answer 1

Я сделал свои собственные тесты, и вот что я нашел

Расширение отлично работает, если вы не создаете data объект в дочернем классе, то есть:

//Lion
<script>
import Cat from './cat';

export default {
  extends: Cat,
  created() {
    this.actionsPredefined.purr(); //this prints purr
  }
}

</script>

Это также хорошо работает, если вы определяете data и их унаследованные свойства как функции стрелок, то есть:

<script>
import Cat from './cat';

export default {
  extends: Cat,
  data() {
    return {
      actions: {
        eat: () => this.actionsPredefined.eat(), 
        purr: () => this.actionsPredefined.purr(),
        roar: (console.log('roar'))
      }
    }
  },
  created() {
    this.actions.eat(); // eat
    this.actions.purr(); // purr
    this.actions.roar; // roar
  }
}

</script>

И компонент Cat:

<script>
  export default {
    data() {
      return {
        actionsPredefined: {
          eat: () => (console.log('eat')),
          purr: () => (console.log('purr')),
          meow: () => (console.log('meow')),
        }
      }
    }
  }
</script>

Answer 2

Vue вызывает функцию data подкомпонента (Lion) до , вызывает функцию data суперкомпонента (Cat). Свойства данных, определенные в Cat, не будут доступны для экземпляра в это время.

Я также могу установить пустые actions в данных Lion.vue и заполнить их только в created() ловушке, и это будет работать, но почему-то это не похоже на правильный способ сделать это.

Почему бы и нет? Какая разница, если вы инициализируете actions в data цепочках стихов created ловушке?