最近做的一个项目，涉及到了分页问题，该项目的分页使用的是单独写的组件，不同页面都使用了该组件，所以遇到了两个问题：

• 怎么将父组件的值传递给子组件
• 怎么将子组件的值传递给父组件

说白了就是怎么实现父子组件的数据传递问题 QAQ

父组件传递值给子组件

### 父组件 category.vue
### 仅仅是局部代码

--- 引用组件部分
<boot-page 
:allpage.sync="allpage"
:current.sync="current"
:showItem.sync="showItem"
></boot-page>

// 子组件 bootpage.vue
// 仅仅是局部代码

--- js部分代码
export default {
  props: [
    'allpage',
    'showItem',
    'current',
  ],
  // 注意在props内使用的data里面不可在定义使用
  data(){
      return{

    }
  },
  ....
}

大致上就是在父组件内引用的子组件上按照上述的方法写入想传递的值，在子组件内使用props进行定义父组件传来的值，并在其他地方进行使用，注意：在 props 内的值不可在data内重新定义使用，否则会报错

子组件传递值给父组件

因为分页组件在不同的页面都进行了使用，所以我们要应对不同的数据接口，全部都写入分页组件也忒麻烦，这个时候用到了：this.$emit()方法~~

// 分页组件内
goto(index){
    this.$emit('changePage',index)
}

// 父组件内

<boot-page 
:allpage.sync="allpage"
:current.sync="current"
:showItem.sync="showItem"
@changePage="changePage"  // 这个就是调用的
></boot-page>

--- js内容
changePage(page) {
    // 这个是分页请求
    this.current = page; // page为子组件传来的值
    this.getGoodsList(); // 你的数据请求方法
},

关于this.$emit()方法的说明：

具体关于this.$emit()方法的具体使用和介绍可以百度一下具体了解~~~ 在此不多做过多介绍