有什么方法可以从子组件到父组件获取计算数据吗?因为我首先将数据从父级发送到子级,然后我想在父级组件中使用计算属性(数据)。我想这样做是因为我也想在其他组件中重用那个重要的组件(子组件)。
我有一个用于过滤我的项目的搜索输入字段,当我写下一些东西时,我想从子组件中取回该列表。
父组件
<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
吗?
最佳答案
有几种方法可以将数据发送回父级,但我想说的最简单的方法可能是在计算中使用发射。
在 child 身上:
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
做类似的事情,或者从父级传递一个函数作为通知父级的 prop,但我推荐的方法是使用 vuex
关于javascript - 我可以从子组件到父组件获取计算数据吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50413352/