void mutating a prop directly since the value will be overwritten when...

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

下图看效果