如何以烤串风格名称在视图中使用自定义组件,仿照ElementUI的那种命名方式,如 el-button
例如有形如components/user-tip的自定义组件,使用如下风格会违反eslint语法规范:
import user-tip from "@/components/user-tip"
因而不能像这样在视图中调用:
<user-tip></user-tip>
'import ... =' can only be used in TypeScript files.
怀疑ElementUI是通过类似批处理的方式将所有组件统一使用Vue.Component()的方式批量注册了组件:
Vue.Component(`el-${name}`, `${code}`)
那么在vue-cli中如何在vue单页代码中实现呢?
有没有官方的解决方案,不使用Vue.Component方式,按照vue单页代码规范实现带有“-”的组件名称呢?
已自行解决,尝试了一下,js部分仍采用大/小驼峰命名法:
import userTip from "@/components/user-tip"
// 或 UserTip
视图中如果按以下名称调用,都会自动识别,效果都是一样的:
<userTip></userTip>
<UserTip></UserTip>
<user-tip></user-tip>
<user-Tip></user-Tip>
<User-Tip></User-Tip>
vue-cli对各种场景的明明风格都有兼容以及互转,比如在组件的props里定义'user-id',就可以在视图中以:user-id="user.id"去使用它,而在js中则通过this.userId调用
你import用驼峰啊 然后components里面也用驼峰 然后就能用你说的那种烤串
你可以这样尝试一下
<el-button>测试按钮</el-button>
import elButton from "@/components/elButton"
components:{elButton}