vue开启eslint后一些⚠️警告处理记录

vue开启eslint后一些⚠️警告处理记录

目录

[TOC]

Type of the default value for ‘xxx‘ prop must be a function

错误代码：

props: {
  data: {
    type: Array,
    default: []
  }
}

修改：

props: {
  data: {
    type: Array,
    default: function () { return [] }
  }
}

或者使用箭头函数

props: {
  data: {
    type: Array,
    default: () => []
  }
}

解决error: Component name “xxx” should always be multi-word.

error:Componentname “xxx” should always be multi-word.

出现这个问题可能是在给组件命名的时候没有使用大驼峰和横线拼接单词，编译的时候会一直报错，而实际上是语法检测问题，每个人或者每个公司团队对语法标准设置不同，

遵循规定的命名规范

VUE props支持多类型的写法 ，解决 property should be a constructor

num: {
            type: [String, Number], //String | Number
            default: '0'
        }

使用  String | Number  有些eslint会报错 The "num" property should be a constructor.eslint vue/require-prop-type-constructor

Vue - 解决子组件中修改props值报错(error Unexpected mutation of “---“ prop vue/no-mutating-props)

其实这就是Vue的 单向数据流 的概念

单向数据流

• 父级prop 的更新会向下流动到子组件中，子组件中所有的 prop 都将会刷新为最新的值
• 但是反过来则不行。你不应该在一个子组件内部改变 prop。否则Vue 会在浏览器的控制台中发出如上图的警告

这是Vue官方防止从子组件意外变更父级组件的状态内容，这样会导致你应用的数据流向杂乱无章。

那么怎么解决呢？很简单

修改 prop 的两种情形：

①：这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个 本地的data prop 并将这个本地 prop 当作其初始值：

props: ['goodsItem'],
data: function () {
  return {
    localGoods: this.goodsItem
  }
}

②：如果这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：

props: ['goodsItem'],
computed: {
  normalizedSize: function () {
    return this.goodsItem.trim().toLowerCase()
  }
}

注意：在JavaScript中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。