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

Posted 2023-02-22

【中文标题】我可以从子组件获取计算数据到父组件吗？

【英文标题】：Can I get computed data from child component to parent component?

【发布时间】：2018-10-29 00:21:43

【问题描述】：

有没有办法从子组件获取计算数据到父组件？因为我首先将数据从父级发送到子级，然后我想在父组件中使用计算属性（数据）。我想这样做是因为我也想在其他组件中重用那个重要的组件（子组件）。

我有一个用于过滤我的项目的搜索输入字段，当我写下某些内容时，我想从子组件中取回该列表。

父组件

<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 吗？

【问题讨论】：

Sending Messages To Parents With Events

Update parent model from child component Vue的可能重复

你能澄清一下comuted property (data)吗？他们不一样。计算属性是一个反应性缓存值，您可以使用挂钩，使用数据，您可以使用 watch 添加挂钩

对不起，我的意思只是计算属性。因为我得到了一些回报，对吗？这就是我写数据的原因。

【参考方案1】：

有几种方法可以将数据发送回父级，但我想说的最简单的方法可能是在计算中使用发射。

在孩子中：

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/

【讨论】：

你写的那个例子我需要在父组件还是子组件中设置？

另外，如 cmets 中所述，指出的重复问题有一个工作示例的答案codepen.io/CodinCat/pen/QdKKBa?editors=1010

我做到了。非常感谢。 :)