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

我认为您的第二个组件可能无法准确写入，methods回调应位于<template> <pagination :pagination="pagination" :callback="loadData" :options="paginationOptions"></pagination> </template> <script> export default { methods: { loadData() { this.fetchMessages(this.pagination.current_page); } } } </script>：

UIApplication.SharedApplication.SetStatusBarHidden(true, UIStatusBarAnimation.Fade);

Answer 2

App.vue

<template>
  <div>
    <pre>{{ request }}</pre>
    <pagination @callback="loadData"></pagination>
  </div>
</template>

<script>
import Pagination from './Pagination.vue'
export default {
  name: 'App',
  components: { Pagination },
  data() {
    return {
      request: {}
    }
  },
  methods: {
    loadData(request) {
      this.request = request
    }
  }
}
</script>

Pagination.vue：

<template>
  <div>
    <button @click="$emit('callback', { currentPage: 10, whatEver: 7 })">call it back</button>
  </div>
</template>

<script>
  export default {
    name: 'Pagination'
  }
</script>

https://codesandbox.io/embed/8xyy4m9kq8

Vue.js通过道具传递回调。

2 个答案: