可以从子组件到父组件获取计算数据吗？

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/