Vue3+TS项目中遇到的eslint问题

发表于 更新于 分类于 阅读次数：
本文字数： 925 阅读时长 ≈ 2 分钟
  1. Component name “Tabs” should always be multi-word vue/multi-word-component-names

配置.eslintrc.json中的rules:

1
"vue/multi-word-component-names": ["off"]
  1. error ‘.native’ modifier on ‘v-on’ directive is deprecated vue/no-deprecated-v-on-native-modifier

‘.native‘修饰符在vue3中被弃用了，所以在代码中去掉.native就可以了。

  1. error Custom elements in iteration require ‘v-bind:key’ directives vue/valid-v-for

原因是代码模板中使用了v-for, 但是没有绑定key值，解决办法建议给v-for绑定key值。

  1. Unexpected mutation of “isShowDialog” prop vue/no-mutating-props

父组件传递过来的变量绑定弹窗会报错，原因是单向数据流，子组件不能该变父组件变量。

改成如下写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//父组件
<biz-detail
    v-model:isShowDialog="state.isShowDialog"
    ...
></biz-detail>
//子组件
...
<el-dialog
    v-model="dialogVisible"
    ...
>...</dialog>

const emits = defineEmits(['update:isShowDialog'])
const dialogVisible = computed({
  get: () => props.isShowDialog,
  set: (val: boolean) => {
    emits('update:isShowDialog', val)
  }
})
-------------本文结束&感谢您的阅读-------------
相关文章