Как объединить два разных компонента?

Question

[Иван Симонов]

Здравствуйте
Есть примитивный код - https://codesandbox.io/s/easy-vue-js-search-forked...
В котором есть компонент Header - в котором находиться компонент Search
Как сделать, чтобы работал поиск из компонента Search для filteredPosts?

Answer 1

[LJ322]

Прокидываете событие из Header выше, а в App отслеживаете его и дальше обрабатываете как вам нужно
https://codesandbox.io/s/easy-vue-js-search-forked...

Comments

[Иван Симонов]

Спасибо. Подскажите пожалуйста, если данные вынесены в отдельный component Contenthttps://codesandbox.io/s/easy-vue-js-search-forked... - как связать эти компоненты?

[LJ322]

Если карточки будут в Content? Точно так же: добавляете в Content пропс, в который прокидываете searchData и фильтруете уже внутри Content. Но обычно в таких случаях либо поиск и фильтрацию делают в одном компоненте (в данном случае Search будет лучше тоже в Content вынести), либо используют шину/store, чтобы вынести состояние поиска и не прокидывать его через множество уровней

[Иван Симонов]

Где-то допускаю ошибку - https://codesandbox.io/s/easy-vue-js-search-forked...
LJ322,

[LJ322]

Иван Симонов, у меня компонент Content пустой по вашей ссылке, поиск работает

[Иван Симонов]

LJ322, поправил https://codesandbox.io/s/easy-vue-js-search-forked...

[LJ322]

Иван Симонов, очень много ошибок, поправил - https://codesandbox.io/s/easy-vue-js-search-forked...
props задаются в компоненте, чтобы определить какой тип данных нужно принимать из вне и в какую переменную записывать
Также почитайте документацию, там более подробно описано поведение фреймворка и что зачем вообще нужно https://ru.vuejs.org/v2/guide/. Начинайте с простых примеров и далее по списку, потом появится ясность как нужно делать, а как не нужно