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'
            }]
          }
        }
      }
    }           

下圖看效果