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

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>