Vue_子组件修改父组件的值_卡bug

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态 —— 这会让应用的数据流难以理解

另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着不应该在子组件内部改变 prop。如果这么做了，Vue 会在控制台给出 警告

Vue 不推荐直接在子组件中修改父组件传来的 props 的值，会报错

[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: "result" (found in component )

---

一个典型例子 ：

父组件数据变化时，子组件数据会相应变化；而子组件数据变化时，父组件数据不变，并在控制台显示警告 ：

修改子组件数据时，打开浏览器控制台会出现下图所示警告提示

---

3、更加妥帖的方案是，使用变量储存 prop 的初始值，并使用 watch 来观察 prop 的值的变化。发生变化时，更新变量的值

---

卡 bug => 父组件改变 ， 子组件改变 ； 反之 ， 子组件改变 ， 父组件也改变

就是父组件传递给子组件一个 复杂数据类型 ， 这里就传递给子组件一个

对象  {  }  复杂数据类型

这里利用的知识点就是一个 堆和栈 的问题

对象 {  }  因为 它是一个复杂数据类型 ， 所以利用这个特性 ， 

我们再在子组件里面去改父组件传递过来的对象 {  }  里面的内容时 ， 

就不会再报错了 ， 因为其堆内的引用地址信息并没有改变 ， 只是改变了其栈内的数据 ，

算是卡了一个小 bug 吧 ，

就是当你想在子组件内也去实时的改变父组件传递过来的东西时

---

来一个项目中利用 卡 bug 的实际使用案例

场景需求 ： 输入框限制用户只能输入数字类型

先封装好一个数字型输入框 ， 其中里面就是利用了

父组件内传递过来了一个 对象 的 复杂数据类型  modelValue

<!-- 作者 : 小灰狼
     功能 : 数字框
     时间 : 2022/04 -->
<template>
  <div>
    <el-input
      v-if="inputShow"
      :readonly="readonly"
      :disabled="disabled"
      :size="inputSize"
      :style="inputStyle"
      :maxlength="maxlength"
      :placeholder="placeholder"
      v-model="modelValue.val"
      @input="handleNumInput($event, modelValue.val)"
    >
    </el-input>
  </div>
</template>

<script>
// 导入数字型输入框封装函数
import { digitalInput } from "../../utils/digitalInput";

export default {
  name: "numInput",
  props: {
    inputShow: {
      // 控制是否显示数字框
      type: Boolean,
      required: true,
      default: false,
    },
    readonly: {
      // 控制数字框是否只读
      type: Boolean,
      required: true,
      default: false,
    },
    disabled: {
      // 控制数字框是否禁用
      type: Boolean,
      default: false,
    },
    inputSize: {
      // 控制数字框大小
      type: String,
      required: true,
      default: "small",
    },
    inputStyle: {
      // 控制数字框样式
      type: Object,
      required: true,
      default: {},
    },
    maxlength: {
      // 控制数字框内容长度
      type: String,
      required: true,
      default: "1",
    },
    placeholder: {
      // 数字框提示文本
      type: String,
      required: true,
      default: "正整数",
    },
    modelValue: {
      // 数字框绑定值
      // type: Object,
      required: true,
      default: {},
    },
  },
  methods: {
    handleNumInput(event, val) {
      // 限制用户输入非数字内容
      this.modelValue.val = digitalInput(event, val);
      // this.$emit("handleNumInput", digitalInput(event, val));
    },
  },
};
</script>

digitalInput.js 文件

/** 数字型输入框
 * @param {} event 事件对象
 * @param {} modelValue 输入框绑定值
 * @return {} 处理好的内容
 */
// 限制用户只能输入数字
export const digitalInput = (event, modelValue) => {
  // 限制用户输入非数字内容
  if (!/^[0-9]*[1-9][0-9]*$/.test(event)) {
    modelValue = event.replace(/\D/g, "");
  }
  console.log(modelValue, "封装函数");
  return modelValue;
};

父组件内使用并向下传递给子组件一个对象数据类型 ：modelValue: { val: "1", }

<template>
  <div>
    <!-- 数字框组件 -->
    <num-input
      :inputShow="quInputType === '3'"
      :readonly="false"
      :inputSize="'small'"
      :inputStyle="{ width: '300px' }"
      :maxlength="numlength"
      :placeholder="'请输入正整数'"
      :modelValue="modelValue"
    ></num-input>
  </div>
</template>

<script>
// 导入数字框组件
import numInput from "../../../components/common/numInput.vue";

export default {
  name: "container",
  components: {
    numInput, // 数字框组件
  },
  data() {
    return {
      quInputType: "3", // 类型
      numlength: "1", // 控制数字位数
      modelValue: {
        val: "1",
      },
    };
  },
  methods: {},
};
</script>

---

这样子我们在子组件内也能够实时的改变父组件内的东西啦~

感觉算不算是卡了其中的一个小 bug 呢 ？