Question

我试图通用的Vue.JS组件通过AJAX调用执行分页。我希望组件使用的数据（即项目列表）由组件封装，并且只有AJAX URL通过Vue.JS Props传递给组件。我正在使用SLOT填充组件模板，包括迭代部分.. 我认为这意味着父（调用者）需要在迭代期间访问绑定变量，因为调用者循环遍历项目。我不能将循环部分放在组件中，因为组件变得特定于一种类型列表，它不再是一般的了。

即使正在使用SLOT，如何让组件遍历项目..或者至少允许父项迭代项目但将数据传递给组件，以便它可以获取下一页并更新父母的数据。

为了更好地说明以下代码：

// my component
Vue.component('pagination', {
  template: '#pagination-component',
  props:  {
   // the URL for ajax calls is passed from parent to component
   source: {
      type: String,
      required: true
    }
 },
  data: function () {
    // access the data being paginated somehow
    return data;
  },

  created: 
     function () {
    console.log("component loaded...");
    this.getNextPage();
    },
  methods: 
  {
    getNextPage: function () {
          console.log("getNextPage called...");
          // call ajax method and populate the binded data 
    },
    getPrevPage: function () {
          console.log("getPrevPage called...");
          // call ajax method and populate the binded data    
    }
  }
})

console.log("javascript loaded...");


var app = new Vue({
     el: '#wrapper',
data: {    
}
})

我的组件布局是：

<script type="text/x-template" id="pagination-component">

<div class="pagination-wrapper">

<slot name="header"></slot>

<slot name="table">default text: Please define the table in parent!</slot>

<div class="well"> 
    <a href="#" @click="getPrevPage">Previous Page</a> | 
   <a href="#" @click="getNextPage">Next Page</a>
</div>

<slot name="footer"></slot>

</div>
</script>

和使用该组件的主页（父）是：

<div class="table-wrapper" slot="table">

    <table class='table'>

         <tr>
             <th>Username</th>
             <th>First name</th>
             <th>Last name</th>
             <th>E-mail</th>
        </tr>

        <tr v-for="user in users">
          <td>
          <a :href="user.id">{{user.username}}</a>
          </td>
          <td>{{user.firstname}}</td>
          <td>{{user.lastname}}</td>
          <td>{{user.email}}</td>
        </tr>

    </table>

</div>

Answer 1

我意识到让一个paginator处理获取数据是很诱人的，但我认为最好的方法是让paginator与它分页的数据完全分离。

因此，父节点应该通过最大页数，并且paginator组件应该将页码发送回父节点，然后父节点应该处理基于该页面号获取数据。这意味着您可以开发使用分页器的不同分页组件，而无需创建一个复杂组件。

我确实在几个月前写了一些东西，采用这种方法，欢迎你在我的GitHub Page看一下，虽然这个特殊的组件不稳定，但它应该让你知道我的意思的意思。

Vue.js分页组件

1 个答案: