报错：[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

Project encountered parent component by value activeIndex

<Tabs :tabs="tabs" :activeIndex="activeIndex" ></Tabs>
<script >
export default{
 updated(){
          let currentRoute=this.$route.name;
           var arr=Array.from(this.$store.state.app.tabs);
           if(arr.indexOf(currentRoute)!=-1){

             this.activeIndex=this.$store.state.app.activeIndex=arr.indexOf(currentRoute).toString();
           }

        }
}
</script>

Receives the value subassembly

<template>
      <el-tabs type="card" v-model="activeIndex"    >
        <el-tab-pane v-for="(item,index) in tabs" :label="item"  :closable="index==0?false:true" :name="index.toString()"  ></el-tab-pane>
      </el-tabs>
</template>

<script>
  export default{
      data(){
            return {
              tabs:[],
          }
        },

      props:['activeIndex']

    }
</script>

 

 

 Reference Site https://juejin.im/entry/5843abb1a22b9d007a97854c
due to the parent component updated () method to change the this.activeIndex value, update method in addition to the parent component that triggered this method, sub-assemblies will trigger that changes the sub-components of activeIndex value, but since the transfer mechanism Sons assembly will cause an error Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders ....
Therefore, when the sub-assembly used to go through a new variable value (the currentIndex) redelivery, so that when this value is changed, the changes will not be made activeIndex

// V-Binding Model Change 
<EL-tabs type = "Card" = V-Model "the currentIndex">    
</ EL-tabs> 
<Script> 
  Export default { 
      Data () { 
            return { 
              tabs: [], 
              the currentIndex: the this .activeIndex // activeIndex currentIndex receiving parent component values transmitted; 
          } 
        }, 

      the props: [ 'activeIndex' ] 

    }
 </ Script>

 

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

      props:['activeIndex']

    }
</script>