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

时间:2018-05-18 14:18:10

标签: javascript vue.js vuejs2

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

我有一个搜索输入字段用于过滤我的项目,当我写下来的东西时,我想从子组件中取回该列表。

父组件

pd.to_datetime

子组件

v_2017 = v[pd.to_datetime(v.index).year >= 2017]
print(v_2017)

2017-05     5
2017-07     2
2017-08    13
2017-09    40
2017-10    47
2017-11    40
2017-12    26
2018-01    16
Name: 1, dtype: int64

我可以在父组件中获得<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> 吗?

1 个答案:

答案 0 :(得分:3)

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

在孩子身上:

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/