【无标题】vue拿不到组件传的props

用eslint写代码时遇到了一个奇怪的问题
代码如下
给Nav组件传了一个prop

<Nav name='xx' />

这是Nav组件接收props

<script lang="ts" setup>
import {toRefs} from 'vue';

const props=defineProps<{
  'name':string,
  'fill'?:string
}>();
const {name} =toRefs(props);
console.log(name);    //undefined
</script>

我们打印出接收到的props.name发现是undefined

是不是觉得很奇怪怎么会接收不到props呢？

答案就是我配置的eslint出了问题，他把类型声明的key的加上了引号

const props=defineProps<{
  'name':string,
  'fill'?:string
}>();

这样写是错误的正确写法应该是下面的写法,不能加引号

const props=defineProps<{
  name:string,
  fill?:string
}>()

记得在eslint配置rule上删除
'quote-props':['error', 'always'], // 对象字面量中的属性名是否强制双引号
或
设置成off就可以了，这样bug就解决了