void mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property b

void mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated:

单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

vue官网截图

vue报错常见场景，以下动态tab切换，子组件分页需要改变初始传参的正确写法

在父组件引入子组件

<div class="m-tab">
      <div class="m-navbar">
        <a v-for="item in tablist" class="m-items" :class="{ mactive : activetab == item.idx }" @click="tabs(item.idx)" :key="item.idx">
          {{ item.title }}
          <i class="m-sign"></i>
        </a>
      </div>
      <div v-for="item in tablist" class="m-sub" v-show="activetab == item.idx">
        <insuresub :post="item"></insuresub>
      </div>
    </div>
    
  import navbar from '@/components/navbar'
  import insuresub from '@/components/insuresub'


  export default {
    name: "insure",
    components: {
      navbar,
      insuresub,
    },
    data() {
      return {
        activetab: 'c1',
        tablist: [{
          idx: 'c1',
          title: '医疗险',
          page: '2',
          count: '12',
          sub:[{
            price: '100'
          },{
            price: '80'
          }]
        },{
          idx: 'c2',
          title: '重疾险',
          page: '5',
          count: '8',
          sub:[{
            price: '70'
          },{
            price: '90'
          }]
        },{
          idx: 'c3',
          title: '寿险',
          page: '3',
          count: '11',
          sub:[{
            price: '200'
          },{
            price: '800'
          }]
        }],
      }
    },
    methods: {
      tabs (e){
        this.activetab = e;
      }
    }
  }           

下面是子组件接收传参动态改变，子组件 next() 需要动态请求数据达到分页效果，我这里写的静态数据方便理解

{{ post.idx }}-{{ post.page }}页/{{ post.count }}页
    <a v-for="item in list.sub" class="card" @click="next(list.page)">
      <div class="cardhead">
        <div class="cardbox">
          <div class="color-m size-a">1623人正在保障中...</div>
          <div class="cardname">产品计划</div>
          <div class="color-c size-a">可多次赔付 | 340种疾病 | 保障全面</div>
          <span class="color-l">￥<span class="size-e">{{ item.price }}</span></span>起
        </div>
        <img class="cardimg" src="../assets/images/index4.jpg" alt="图片加载失败" />
      </div>
      <div class="cardbody">
        <div>
          <div class="size-c">200万</div>
          <span class="color-c size-a">保额</span>
        </div>
        <div>
          <div class="size-c">1周岁-60周岁</div>
          <span class="color-c size-a">投保年龄</span>
        </div>
        <div>
          <div class="size-c">1年</div>
          <span class="color-c size-a">投保期限</span>
        </div>
      </div>
    </a>
    
    
    export default {
      name: "insuresub",
      data(){
        return {
          list:this.post
        }
      },
      props:['post'],
      methods: {
        next: function(e){
          console.log(e)
          this.list = {
            idx: 'c1',
            title: '医疗险',
            page: '2',
            count: '12',
            sub:[{
              price: '198'
            },{
              price: '280'
            }]
          }
        }
      }
    }           

下图看效果