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

心已赠人 2022-03-22 06:54 471阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70][]

我们都知道在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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70]: /images/20220322/7fdaabcb5e764c7493078219a0495577.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70 1]: /images/20220322/f7a70846f4624516a9ac8206cecf92d3.png