报错：[Vue warn]: Avoid 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 bei

项目中遇到父组件传值 activeIndex

<Tabs :tabs="tabs" :activeIndex="activeIndex" ></Tabs>
<script >
export default{  4  updated(){  5           let currentRoute=this.$route.name;  6            var arr=Array.from(this.$store.state.app.tabs);  7            if(arr.indexOf(currentRoute)!=-1){  8 
             this.activeIndex=this.$store.state.app.activeIndex=arr.indexOf(currentRoute).toString(); 10  } 11 
 } 13 } 14 </script>

子组件接收该值

 1 <template>  2 <el-tabs type="card" v-model="activeIndex" >  3 <el-tab-pane v-for="(item,index) in tabs" :label="item" :closable="index==0?false:true" :name="index.toString()" ></el-tab-pane>  4 </el-tabs>  5 </template>  6  7 <script>  8 export default{  9  data(){ 10 return { 11  tabs:[], 12  } 13  }, 14 15 props:['activeIndex'] 16 17  } 18 </script>

参考网址https://juejin.im/entry/5843abb1a22b9d007a97854c
由于父组件updated()方法中更改了this.activeIndex值，update方法除了父组件触发这个方法，子组件也会触发，即子组件会更改activeIndex的值，但是由于父子组件的传递机制，会造成报错Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders....
因此在子组件使用该值时需要经过新变量（currentIndex）重新传递，这样当这个值变更时，不会造activeIndex的更改

 

//v-model绑定更改
<el-tabs type="card" v-model="currentIndex"  >   
</el-tabs>
<script>
  export default{  6  data(){  7             return {  8  tabs:[],  9               currentIndex:this.activeIndex //currentIndex接收父组件传来的activeIndex值；
 } 11  }, 12 
      props:['activeIndex'] 14 
 } 16 </script>

作者：saintkl 19 链接：https://www.jianshu.com/p/392145843afe
來源：简书 21 简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。