Vue子组件修改父组件值报错：Avoid mutating a prop directly since the value will be overwritte(props组件通讯问题）

问题描述：在父组件中通过自定义事件触发方法，将父组件中的数据传给子组件，在子组件中接受，并且修改其值。值能被修改，但是控制台一直在报警告。

具体错误
代码示例 注意代码第13行（input v-model="childData"）

<script>
        // 子--->父
        // 子组件
        Vue.component('Child', {
        data() {
            return {
              
            }
        },
        template: `
        <div>
            <p>我是子组件</p>
            <input v-model="childData" @input="changeValue(childData)"/>
            <button @click = "show">展示</button>
        </div>
        `,
        props: ['childData'],
        methods:{
            changeValue(val){
                // 自定义的事件一定要通过this.$emit()去触发
                // $emit(自定义的事件名，消息) 发送
                this.$emit('childhandler',val)
            },
            show(){
                alert(this.myValue)
            }
        }
    });
    // 父组件
    Vue.component('Parent', {
        data() {
            return {
                msg: "我是父组件的数据",
            }
        },
        template: `
            <div>
                <p>我是父组件</p>
                <Child :childData="msg" @childhandler="childhandler"/>
            </div>
        `,
        methods:{
            childhandler(val){
                console.log(val);
            }
        }

    });

    // 声明局部组件入口组件
    var App = {
        data() {
            return {

            }
        },
        template: `
            <div>
                <Parent/>
            </div>
        `
    };
    new Vue({
        el: '#app',
        data() {
            return {

            }
        },
        components: {
            // 挂子
            App
        },
        // 用子
        template: `<App/>`
    });
</script>

解决办法：
调用父传子的变量的时候是跟和data里面的变量一样的，都是通过this.变量来调用，这个问题就是说从父组件传入子组件的变量是不能使用this.变量直接改变的，要在data或者computed属性里面重新定义一个变量，改变data或者computed属性里面的变量就不会报错。

修改子组件中的部分内容（data重新定义属性·(第3行)、模板中使用重新定义的属性·(第9行)）

data() {
            return {
               myValue:this.childData//myValue是重新自定义的属性，用来接受父组件给的值
            }
        },
        template: `
        <div>
            <p>我是子组件</p>
            <input v-model="myValue" @input="changeValue(childData)"/>
            <button @click = "show">展示</button>
        </div>
        `,

✔️ 这样控制台就不会有警告。