1***@qq.com
1***@qq.com
  • 发布:2021-08-28 10:03
  • 更新:2021-08-28 10:03
  • 阅读:1975

避免直接改变prop,因为当父组件重新呈现时,该值将被覆盖。 相反,使用基于道具值的

分类:nvue

父组件视图
以滑动开关为例 bIsOpenState

<card v-for="(jobItem, index) in ZHiWeiList" :key="index"  
            :jobName="jobItem.cWorkName"  
            :jobSalary="jobItem.dGangWeiXinZiBegin+'-'+jobItem.dGangWeiXinZiEnd"  
            :tagList="jobItem.cZhiWeiYaoQiu"  
            :place="jobItem.Province+jobItem.City+jobItem.Area+jobItem.cBranchShopAddress"  
            :userName="jobItem.cLianXiName"  
            :bIsOpenState="jobItem.bIsOpenState"  
            :date="jobItem.dFaBuDate"    
            @toCardDetail="toUpdZhiWei(jobItem)"   
            @bIsOpenStateChange="bIsOpenStateChange(jobItem.bIsOpenState,jobItem.cZhiWeiCode,index)"  
            @toUpd="toUpd(jobItem.cZhiWeiCode,index)"  
            @toDel="toDel(jobItem.cZhiWeiCode,index)"  
            >  
            </card>

父组件事件

bIsOpenStateChange(bIsOpenState1,cZhiWeiCode,index){  
                console.log("bIsOpenStateChange",bIsOpenState1,cZhiWeiCode,index);  
                let that=this;  
                console.log(bIsOpenState1);  
                if(bIsOpenState1)  
                {  
                    bIsOpenState1=false;  
                }  
                else  
                {  
                    bIsOpenState1=true;  
                }  
                console.log("原来",that.ZHiWeiList[index].bIsOpenState);  
                that.ZHiWeiList[index].bIsOpenState=bIsOpenState1;  
                // console.log(that.ZHiWeiList);  
                console.log("改后",that.ZHiWeiList[index].bIsOpenState);  
            },  
            toUpd(cZhiWeiCode,index){  
                console.log("toUpd",cZhiWeiCode,index);  
            },  
            toDel(cZhiWeiCode,index){  
                console.log("toDel",cZhiWeiCode,index);  
            },

子组件视图

<template>  
    <view class="re-card bg-white flex-column align-center radius-xs">  
    <view @click="toCardDetail" style="width: 95%;">  
        <view class="card-top flex-row">  
            <view class="job-name">  
                <text class="text-xl">{{jobName}}</text>  
            </view>  
            <view class="job-salary text-bold text-right" style="color: #e4b118;">  
                <text class="text-xl">{{jobSalary}}</text>  
            </view>  
        </view>  
        <view class="tag-list flex-row">  
            <view class="tag-item bg-gray">  
                <text>{{tagList}}</text>  
            </view>  
            <!-- <view class="tag-item bg-gray" v-for="(tagItem, index) in tagList" :key="index">  
                <text>{{tagItem.name}}</text>  
            </view> -->  
        </view>  
        <view class="place margin-top-xs text-gray text-xs">  
            <text class="fa fa-map-marker"></text>  
            <text class="margin-left-sm">{{place}}</text>  
        </view>  
        <view class="user-info flex-row align-center"  style="border-bottom: 2rpx solid #E4B118;">  
            <image :src="userAvatar" class="avatar-xs"></image>  
            <text class="text-xs margin-left-sm text-gray">{{userName}}</text>  
            <text>{{date}}</text>  
        </view>  
        </view>  
        <view style="width: 100%;height: 80rpx;margin-top: 10rpx;">  
            <u-switch @change="bIsOpenStateChange()" v-model="bIsOpenState1" size="50" active-color="#e4b118" style="float: left;margin-left: 5%;"></u-switch>  
            <view @click="toUpd()" class="btn-operation">修改</view>  
            <view @click="toDel()" class="btn-operation">删除</view>  
            </view>  
    </view>  
</template>  

子组件事件


<script>  
    export default {  
        name: 'card',  
        props: {  
            jobId: {  
                type: String,  
                default: ''  
            },  
            tagList:'',  
            // tagList: {  
            //  type: Array,  
            //  default: []  
            // },  
            date: {  
                type: String,  
                default: ''  
            },  
            jobName: {  
                type: String,  
                default: ''  
            },  
            jobSalary: {  
                type: String,  
                default: ''  
            },  
            place: {  
                type: String,  
                default: ''  
            },  
            userName: {  
                type: String,  
                default: ''  
            },  
            userAvatar: {  
                type: String,  
                default: ''  
            },  
            offerDate: {  
                type: String,  
                default: ''  
            },  
            bIsOpenState:{  
                type:Boolean,  
                default:false  
            },  
        },  
        data() {  
            return {  
                bIsOpenState1:this.bIsOpenState  
            };  
        },  
        methods: {  
            toCardDetail:function() {  
                this.$emit('toCardDetail');  
            },  
            bIsOpenStateChange:function(){  
                this.$emit('bIsOpenStateChange');  
            },  
            toUpd:function(){  
                this.$emit('toUpd');  
            },  
            toDel:function(){  
                this.$emit('toDel');  
            },  

        }  
    }  
</script>

ps:
避免直接改变属性,因为当父组件重新呈现时,该值将被覆盖。相反,使用基于属性值的数据或计算属性。道具正在变异:“tabIndex

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: “tabIndex”

这样的时候,需要再子页面的data里面去创建一个值去接受父页面传递过来的值,这样这个警告就会消失掉
父组件传递过来的tabIndex,在子组件的时候,用props接受了之后,然后在data里面创建一个变量去接受,这样就能去掉这个警告了

子组件获取值是bIsOpenState
定义一个bIsOpenState1来接受这个值
视图绑定用bIsOpenState1

0 关注 分享

要回复文章请先登录注册