Могу ли я получить вычисленные данные из дочернего компонента в родительский компонент?

Question

Есть ли способ получить вычисленные данные из дочернего компонента в родительский компонент? Потому что я сначала отправляю данные от родителя к потомку, а затем хочу использовать свойство comuted (data) в родительском компоненте. Я хочу сделать это, потому что я хочу повторно использовать этот важный компонент (дочерний элемент) и в других компонентах.

У меня есть поле ввода поиска для фильтрации моих товаров, и когда я что-то записал, я хочу получить этот список от дочернего компонента.

Родительский компонент

<input class="form-control form-control-search m-input" autocomplete="off" type="text" v-on:input='testFunc()' v-model="search" placeholder="Search...">
<paginate-links v-if="items.length > 0" :models="items">
  <div class="m-list-timeline__item no-timeline" v-for="item in filterItems" v-bind:key="item.id">
    {{ item.title }}
  </div>
</paginate-links>

Дочерний компонент

props: ['item']
computed: {
    filterItems () {
      return filter // here goes my code
    }
}

Так могу ли я получить filterItems в родительском компоненте?

Answer 1

Есть несколько способов отправить данные обратно родителю, но, вероятно, самый простой способ, который я бы сказал, это использовать emit в пределах вычислений.

у ребенка:

computed:{
  myVal() {
    let temp = this.num + 1;
    this.$emit('onNumChange', temp);
    return temp;
  }
}

в родительском шаблоне:

<my-child-component @onNumChange="changeHandler"/>

в родительском скрипте

methods: {
  changeHandler(value) {
    console.log('Value changed to: ', value);
  }
}

Вы могли бы сделать то же самое с watchили передать функцию от родителя в качестве опоры, которая уведомляет родителя, но я рекомендую использовать vuex

https://vuex.vuejs.org/en/