在子组件使用v-model，接收父组件的值报错问题

最新推荐文章于 2025-04-17 16:24:17 发布

原创最新推荐文章于 2025-04-17 16:24:17 发布 · 5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue #vue.js

vue踩坑记专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在Vue.js中遇到的一个常见错误：直接修改通过Props传递的值，并提供了具体的解决方案。该错误通常发生在使用v-model指令绑定Props时，解决办法是通过watch监听器来同步外部对Props的更改。

1. 报错提示：

[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: "typeName"

2. 使用场景：

在 input 框中输入时，就报错。

解决方法：

创建针对props属性的watch来同步组件外对props的修改（单向）
如果把 $data 换成 this话，也会报错

父组件：

<template>
    <div>
        <test />
    </div>
</template>

<script>
import Test from '@/components/Test/index.vue';
export default {
    name: "CreateLabel",
    components: {
        Test
    },
    // data 这里没有用到就没有写
}
</script>

子组件：

<template>
    <div>
        input: <input v-model="$data.value" />
    </div>
</template>

<script>
export default {
    name: "Test",
    props: {
        typeName: String,
    },
    data () {
        return {
            value: this.typeName,
        }
    },
    watch: {
        typeName(val){
            $data.value = val;
        }
    }
}
</script>