父组件视图
以滑动开关为例 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 个评论
要回复文章请先登录或注册