vue分页父传子报错 Avoid mutating ......Prop being mutated: "pageNum"

Question

父组件

<template>
  <message :list="list" :sendData="total" :pageNum="pageNum" :pageSize="pageSize" @start="startData"
           @end="endData"></message>
</template>

<script>
  import Qs from 'qs';
  import {getSendMsgPage} from '../../api/api'
  import message from './components/message'

  export default {
    name: 'allMessage',
    components: {message},
    data() {
      return {
        total: 0,
        list: [],
        startData: '',
        endData: '',
        pageNum: 1,
        pageSize: 10,
        TempParams: {
          "pageNum": 1,
          "pageSize": 10,
          "condition": {
            "userId": "1",
            "startTime": this.startData,
            "endTime": this.endData,
            "nickName": "",
            "title": "",
            "generalView": ""
          }
        }
      }
    },

    mounted() {
      this.getMsg();
    },

    methods: {
      getMsg() {
        let params = JSON.stringify(this.TempParams);
        getSendMsgPage(params).then(res => {
          console.log(res);
          let collectData = res.data.data.list;
          if (res.data.code === 0) {
            this.pageNum = res.data.data.pageNum;
            this.pageSize = res.data.data.pageSize;
            this.list = collectData;
            this.total = res.data.data.total;
          }
        })
      }
    }
  }
</script>

子组件

<el-pagination background layout="prev, pager, next" :total="sendData" @current-change="handleCurrentChange"
                       :page-size="pageSize" :current-page.sync="curNum" ></el-pagination>

props: {
      list: Array,
      sendData: Number,
      pageSize: Number,
      pageNum: Number,
    } ,

Answer 1

你这是在在子组件里面对pageNum进行了更改吧，props构成的父子组件间是一条单向数据流的，防止从子组件意外改变父级组件的状态。