vue中父组件向子组件传递值,子组件更改了值,却不能渲染到页面

父组件传递值

<Entry v-if="qureyVis && temp && Classvalue && !isqurey " :userList="userList" @UpdateUser="updateScore" @addUsers="addScore"></Entry>

子组件:

<template>
    <div class="ss">
        <el-row class="borderColor">
            <el-col :span="14" class="borderColor2">用户id</el-col>
            <el-col :span="5" class="borderColor2">姓名</el-col>
            <el-col :span="4" >课程成绩</el-col>
        </el-row>
        <el-row v-for="(item,index) in userList" :key="index" :class="item.status===200?'borderColor1 colorgreen':'borderColor1 '">
            <el-col :span="14" class="borderColor2">{{item.id}}</el-col>
            <el-col :span="5" class="borderColor2">{{item.name}}</el-col>
            <el-col :span="4" ><input type="number" v-on:change="size(item.score,index)" v-model="item.score" :min=0 :max=100 /></el-col>
        </el-row>
    </div>
</template>

export default {
    data(){
        return{
            currentPage:1,
        }
    },
    props:['userList'],
    mounted(){
    },
    methods:{
        // 对input输入的数字进行操作
        size(score,index){
            if(score>100){
                // this.userList[index].score=100
                this.$set(this.userList[index],'score',100)
            }else if(score<0 || score==''){
                // this.userList[index].score=0
                this.$set(this.userList[index],'score',0)
            }else if(score.length>1&&score[0]==0){
                // this.userList[index].score=score.substr(1);
                this.$set(this.userList[index],'score',score.substr(1))
                this.size(this.userList[index].score,index)
            }
            // console.log(this.data);
        },
   }
}

img

img

子页面中需要用watch.
https://blog.csdn.net/lander_xiong/article/details/79018737

在父组件定义函数,子组件调用父组件的方法更新,参考:

this.$emit('父组件方法名称');

你这写法有问题啊,props也就是userList是只读属性,你就算$set也没用啊。你需要在data里定义一个值,把props转换成,data才行。

<template>
    <div class="ss">
        <el-row class="borderColor">
            <el-col :span="14" class="borderColor2">用户id</el-col>
            <el-col :span="5" class="borderColor2">姓名</el-col>
            <el-col :span="4" >课程成绩</el-col>
        </el-row>
        <el-row v-for="(item,index) in userList" :key="index" :class="item.status===200?'borderColor1 colorgreen':'borderColor1 '">
            <el-col :span="14" class="borderColor2">{{item.id}}</el-col>
            <el-col :span="5" class="borderColor2">{{item.name}}</el-col>
            <el-col :span="4" ><input type="number" v-on:change="size(item.score,index)" v-model="item.score" :min=0 :max=100 /></el-col>
        </el-row>
    </div>
</template>
export default {
    data(){
        return{
            currentPage:1,
            userList:[] //接收props
        }
    },
    props:['userList'],
    mounted(){
    let {userList}=this.props;
   this.userList=userList;
    },
    methods:{
        // 对input输入的数字进行操作
        size(score,index){
            if(score>100){
                // this.userList[index].score=100
                this.$set(this.userList[index],'score',100)
            }else if(score<0 || score==''){
                // this.userList[index].score=0
                this.$set(this.userList[index],'score',0)
            }else if(score.length>1&&score[0]==0){
                // this.userList[index].score=score.substr(1);
                this.$set(this.userList[index],'score',score.substr(1))
                this.size(this.userList[index].score,index)
            }
            // console.log(this.data);
        },
   }
}