Vue.js如何解决组件之间的传值问题,子组件和父组件之间的相互传值
2017-11-22| 程成| 2383| 3| Vue.js

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





×
作者:程成
QQ:492245711