最近上手了一个项目，这里将分页组件给公用了，这样就涉及到页码，每页显示多少条，一共多少条数据的传递问题。这里，分页组件就相当于子组件，调用它的组件就是父组件，下面介绍如何用vuejs解决组件之间的传值问题。

一、子组件向父组件传值问题

我使用的分页组件是iview里的，下面就我的代码举个例子。

page页码，limit每页显示条数，totalnum总数，分页子组件代码如下：

<template>
    <div style="margin: 10px;overflow: hidden" id="parent">
        <div style="text-align: center;">
            <Page :total="totalnum" show-elevator show-sizer show-total :page-size-opts="[10, 20, 30, 40, 50]" @on-change="getPage" @on-page-size-change="getLimit"></Page>
        </div>
    </div>
</template>
<script>
    export default {
        props: ['totalnum'],
        methods: {
            getPage (page) {
                this.$emit("getPage", page);
            },
            getLimit (limit) {
                this.$emit("getLimit", limit);
            }
        }
    };
</script>

这里需要在你点击页码和，每页显示多少条的时候，需要将这两个值传递到父组件中，父组件相关代码如下：

<pagination v-on:getPage="getNowPage" v-on:getLimit="getNowLimit"></pagination>

export default {
   components: {
      pagination,
      PulseLoader
   },
     methods: {
         getNowPage (page) {
        this.page = page;
      },
      getNowLimit (limit) {
        this.limit = limit;
      }
   }
}

通过在子组件添加this.$emit(方法名，参数)方法，然后在父组件定义这个方法，就可以在参数中获取到传递过来的值了。

二、父组件向子组件传值问题

父组件代码如下，子组件代码如上，主要是props属性里要加上这里的totalnum，这样在父组件改变totalnum时候，子组件可以获取到这个totalnum。

<pagination v-bind:totalnum="totalnum"></pagination>
export default {
   components: {
      pagination,
      PulseLoader
   },
   data () {
      return {
      totalnum: 0
     }
  }
}

通过以上方法，可以实现vuejs组件之间的传值问题，子组件和父组件之间的相互传值问题。