vue中使用props传值出现active警告

[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 being mutated: “active”

翻译过来的意思是：

（翻译可能有误差）：=》避免直接改变一个道具，因为当父组件重新呈现时，该值将被覆盖。相反，使用基于道具值的数据或计算属性。道具突变:“活动”

报错原因应该是：

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。（父组件更新，子组件中的prop值也会更新，但子组件不能修改由父组件传递过来的值）

解决办法

这里的意思是不建议直接用props传过来的active，解决办法是将props传过来的active赋值给data里面的一个状态，然后用这个状态就行

原来报警告的代码

<script>
    export default {
            active:{
                type:Number,
                default:0
            }
        }
    }
</script>

看下图第一行代码v-model里面的active

<van-tabbar v-model="active" active-color="#FA4532" class="footTabbar">
            <van-tabbar-item to="/" >
                <van-icon class-prefix='icon' slot="icon" name="shouye" class="fon"></van-icon>
                <span>首页</span>
            </van-tabbar-item>
            <van-tabbar-item to="/cates" >
                <van-icon class-prefix='icon' slot="icon" name="fenlei" class="fon"></van-icon>
                <span>分类</span>
            </van-tabbar-item>
            <van-tabbar-item to="/found" dot>
                <van-icon class-prefix='icon' slot="icon" name="faxian" class="fon"></van-icon>
                <span>发现</span>
            </van-tabbar-item>
            <van-tabbar-item to="/carts" :info="0">
                <van-icon class-prefix='icon' slot="icon" name="gouwuchekong" class="fon"></van-icon>
                <span>购物车</span>
            </van-tabbar-item>
            <van-tabbar-item to="/mine">
                <van-icon class-prefix='icon' slot="icon" name="wode" class="fon"></van-icon>
                <span>我的</span>
            </van-tabbar-item>
        </van-tabbar>

解决之后的代码

<script>
    export default {
        data(){
            return {
                myActive : this.active
            }
        },
        props:{
            active:{
                type:Number,
                default:0
            }
        }
    }
</script>

这里将之前报错的代码中v-model的active改成了data中的myActive

<van-tabbar v-model="myActive" active-color="#FA4532" class="footTabbar">
            <van-tabbar-item to="/" >
                <van-icon class-prefix='icon' slot="icon" name="shouye" class="fon"></van-icon>
                <span>首页</span>
            </van-tabbar-item>
            <van-tabbar-item to="/cates" >
                <van-icon class-prefix='icon' slot="icon" name="fenlei" class="fon"></van-icon>
                <span>分类</span>
            </van-tabbar-item>
            <van-tabbar-item to="/found" dot>
                <van-icon class-prefix='icon' slot="icon" name="faxian" class="fon"></van-icon>
                <span>发现</span>
            </van-tabbar-item>
            <van-tabbar-item to="/carts" :info="0">
                <van-icon class-prefix='icon' slot="icon" name="gouwuchekong" class="fon"></van-icon>
                <span>购物车</span>
            </van-tabbar-item>
            <van-tabbar-item to="/mine">
                <van-icon class-prefix='icon' slot="icon" name="wode" class="fon"></van-icon>
                <span>我的</span>
            </van-tabbar-item>
        </van-tabbar>