javascript - Vue.js 通过 Prop 传递回调。

Question

我有一个看起来像这样的组件:

<template>
    <div>
        <pagination class="center" :pagination="pagination" :callback="loadData" :options="paginationOptions"></pagination>
    </div>
</template>

<script>
    import Pagination from 'vue-bootstrap-pagination';

    export default {
        components: { Pagination },

        props: ['pagination', 'loadData'],

        data() {
            return {
                paginationOptions: {
                    offset: 5,
                    previousText: 'Terug',
                    nextText: 'Volgende',
                    alwaysShowPrevNext: false
                }
            }
        }
    }
</script>

在我使用的另一个组件中 ^:

<template>
    <pagination :pagination="pagination" :callback="loadData" :options="paginationOptions"></pagination>
</template>

<script>
 export default {
   loadData() {
       this.fetchMessages(this.pagination.current_page);
   }

   //fetchMessages
 }
</script>

但我收到错误:

Invalid prop: type check failed for prop "callback". Expected Function, got Undefined. 
(found in component <pagination>)

在 Vue.js 2.0 中不能传递回调吗？

Answer 1

我认为你的第二个组件可能写得不准确，你的loadData回调应该在methods中:

<template>
    <pagination :pagination="pagination" :callback="loadData" :options="paginationOptions"></pagination>
</template>

<script>
 export default {
   methods: {
     loadData() {
         this.fetchMessages(this.pagination.current_page);
     }
   }
 }
</script>