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

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/