Как найти компонент по их идентификатору?

Question

Например, у меня есть компонент Parent со следующим шаблоном:

<Parent>
  <Child id="foo" @click="doSomething"></Child>
  <Child id="bar" @click="doSomethingElse"></Child>
</Parent>

Мне нужно найти компонент Child с определенным идентификатором (например, с идентификатором foo), поэтомучто я могу позволить этому вызвать событие click для родителя.Сначала я попробовал:

describe('Parent component', () => {
  it('will do something when Child component with id "foo" triggers "click" event.', () => {
    var wrapper = shallowMount(Parent, {
      /* some other options that doesn't matter here. */
    );
    wrapper.find('#foo').vm.$emit('click');
  });
});

Это идет не так, потому что возвращаемая оболочкой метод find не имеет метода vm, когда вы находите селектор, и я не знаю, какделать дальше.

Буду признателен за любую полезную помощь.

PS Я не хочу добавлять дополнительные ref эти компоненты, потому что это добавляет дополнительный код в код реализации..

Answer 1

import Child from '../src/componentsChild.vue'

const children =wrapper.findAll(Child).vm.$emit('click');
const fooChild = children.wrappers.find(wrapper => wrapper.vm.$el.id === 'foo')
foo.vm.$emit('click')

Вы , вероятно, могли бы также использовать ссылку на экземпляр компонента, который сохранен как __vue__ в корневом элементе, но это было бы взломано:

wrapper.find('#foo').element.__vue__.$emit('click');

Answer 2

Вы можете выбрать ребенка, используя const child = document.querySelector('PARENT > #foo');