最近上手了一个项目,这里将分页组件给公用了,这样就涉及到页码,每页显示多少条,一共多少条数据的传递问题。这里,分页组件就相当于子组件,调用它的组件就是父组件,下面介绍如何用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组件之间的传值问题,子组件和父组件之间的相互传值问题。