【Vue】11.解决父组件通过props属性向子组件传入的值被修改以后报错的问题

我在做vue项目的时候遇到了这样的一个问题，在这里做一下总结，就是在提交表单的时候会有一个弹框提醒，这个Dialog我把它封装成了一个子组件，这样在父组件的data属性里面就会定义一个Dialog显示还是隐藏的变量，这个变量默认是false，点击按钮的时候这个变量要变成true显示Dialog，完了以后要关闭Dialog按钮，这个变量就要从父组件传入子组件，在子组件里面改变以后再传回父组件，这里我不是要说vue里面dialog如何实现，所以不贴dialog实现的代码，重点是我在改变这个变量的时候遇到了一个问题，所以写了一个小demo演示一下。

 我们都知道在vue中，父组件传入子组件的变量是存放在props属性中的，我们在调用变量的时候是跟data里面的变量一样的，都是通过this.变量来调用，这个问题就是说从父组件传入子组件的变量是不能this.变量直接改变的，要在data或者computed属性里面重新定义一个变量，改变data或者computed属性里面的变量就不会报错了。

父组件Parent.vue

<template>
    <div>
      <child :fatherMethod="fatherMethod" :message="name" @childByValue="childByValue"></child>
    </div>
</template>

<script>
  import Child from '../../components/Child.vue';

    export default {
      data() {
        return {
          name: 'Parent',
        };
      },
      methods: {
        fatherMethod() {
          console.log('testing');
        },
        // 子组件传回父组件的值
        childByValue(childValue) {
          console.log(childValue);
        },
      },
      components: {
        child: Child,
      },
    };
</script>

<style scoped>

</style>

子组件Child.vue

<template>
  <div>
    <button @click="childMethod">点击</button>
  </div>
</template>

<script>
  export default {
    props: ['fatherMethod', 'message'],
    data() {
      return {
        name: 'Child',
        changeMessage: this.message,
      };
    },
    created() {
      this.fatherMethod();
      // this.message = `hello ${this.message}`; // 报错
      this.changeMessage = `hello ${this.message}`; // 不报错
      console.log(this.message);
    },
    computed: {
      changeMessage1() {
        return `hello1 ${this.message}`;
      },
    },
    methods: {
      childMethod() {
        this.fatherMethod();
        this.$emit('childByValue', this.changeMessage);
        this.$emit('childByValue', this.changeMessage1);
      },
    },
  };
</script>

<style scoped>

</style>