全局mixin混入定义的变量,在组件传值中使用报错

234 阅读1分钟

今天在处理一个组件传值的时候,发生一个猝不及防的报错,

WX20230426-185211.png

大概意思就是“计算属性“ isSuperviseEnv ”已经被定义为一个prop,重复定义了

进入正题,直接上代码

minx.js

 computed: {
    isSuperviseEnv() {
       // xxx就是你计算属性return的值(true|false)
      return xxx
    },
 }

父组件

  // 正常传值
 <components
      :isSuperviseEnv="isSuperviseEnv"
    />

子组件

  // 子组件接收
 props: {
     isSuperviseEnv: {
          type: Boolean,
          default: false
    }
 }

到这里你运行就报错了原因是什么?

就是isSuperviseEnv 是全局混入的computed,已经定义好的值,到子组件的时候你是作为props接收的值

知道为什么报错就好说了,这里我查了好久,才看到isSuperviseEnv是在这个全局混入里的computed声明的,蓝瘦香菇

找到为什么报错就好说了,干掉它

修改父组件

 <components
      :isSupervise="isSuperviseEnv"
    />

修改子组件

 props: {
     isSupervise: {
          type: Boolean,
          default: false
    }

大功告成!粗心大意酿成的悲剧啊...