Как в Vue не отрабатывать хук родителя в дочернем компоненте?

Question

[dev2_betatransfer]

Хук created или mounted отрабатывает и в родителе и в дочернем компоненте. Каким образом сделать чтоб в дочернем компоненте не отрабатывал родительский хук?

const parent = new Vue({
mounted: () => console.log('handler'),
});
const child =  parent.extend({});

Answer 1

[Aetae]

Это логичное поведение. Точно также когда ты наследуешь класс, ты вызываешь конструктор родителя, так и хуки родителя срабатывают у наследника.

Скорее всего ты делаешь что-то не так и используешь наследование не по назначению. Опиши задачу и мы поможем тебе сделать её по-человечески.

В Vue можно настроить кастомные стратегии слияния, но это продвинутый инструмент для исключительных случаев. Это не то что надо использовать не подумав хорошенько.

Comments

[dev2_betatransfer]

У меня есть базовый компонент формы. От этого компонента я наследую множестов других форм. И все формы после отрисовки должны делать пост запрос. Не хотелось бы дублировать код и для каждой формы прописывать в mounted этот запрос, потому хотел это реализовать в базовом компоненте.

[Aetae]

dev2_betatransfer, вот так это делается:
В родителе:

mounted() {
  if(this.getData)
    this.getData();
}

В наследниках, если нужно:

methods: {
  getData() {};
}

Ну или, если больше выносить в родтеля:
В родителе:

mounted() {
  getData(this.url, this.params);
}

В наследниках, если нужно:

data() {
  return {
    url: '...',
    params: {}
  };
}

В общем суть ты должен уловить: в детях по особыми ключами изменяемые участки, в родителе функционал. Inversion of control называется.

[Aetae]

Правда не понял как это соотносится с темой вопроса, если тебе как раз надо чтоб mounted родителя отрабатывал, а не наоборот...

[dev2_betatransfer]

Aetae, Да, имелось ввиду, чтоб операция не выполнялась дважды. Про инверсию контроля я знал), думал что есть способ при котором не нужно писать код в потомке, что то вроде декоратора.

[Aetae]

dev2_betatransfer, если действие одно для всех и никак не зависит от потомка - можно и не писать. Но если потомок как-то должен влиять на это действие, то хоть как-то же надо эту информацию передать?)
Можно даже для всех инстансов потомка разом при создании

const child = parent.extend({
  url: '...'
});

и в parent соответсвенно:

mounted() {
  getData(this.$options.url);
}

Answer 2

[Дмитрий Гололобов]

Дописать свой хук в объект в extend ?

const parent = new Vue({
mounted: () => console.log('handler'),
});
const child =  parent.extend({
  mounted: () => {}
});

Comments

[Aetae]

Нет. Хуки вызываются по цепочке в каждом наследнике. Примерно как constructor в классе.