modelValue

来源：1-7 父子组件间如何通过事件进行通信（2）

weixin_慕雪1363253

2021-12-14 14:23:59

问题描述：

老师，我用this.$emit('update:modelValue',this.modelValue++)修改modelValue的值，为什么值没有改变，提示 Attempting to mutate prop "modelValue". Props are readonly.呢？

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>modelValue</title>
    <script src='https://unpkg.com/vue@next'></script>
</head>
<body>
    <div id='root'></div>
</body>
<script>
    const app=Vue.createApp({
        data(){
            return {
                data:1
            }
        },      
        template:`<child v-model='data' />`
    })
    app.component(`child`,{
        props:['modelValue'],
        methods:{
            handelClick(){
                this.$emit('update:modelValue',this.modelValue++)
            }
        },
        template:`<div @click='handelClick'>{{modelValue}}</div>`
        
    });
    const vm=app.mount('#root');
</script>
</html>

写回答

1回答