Vue3 Vant组件库使用过程中的避坑点
一、问题
vue3版本使用vant失败，具体是在使用组件时失效。
具体实例：Vue版本3 - Vant版本4
根据Vant官方文档可以知道使用组件应该这样引入使用
import {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E--> Button } from 'vant';<van-button type="primary">主要按钮</van-button>
但是我在实际根据官方文档使用却发现无法生效：
源代码：
<template>
<van-button @click="testClick" type="primary">主要按钮{{ show }}</van-button>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import {
Button
} from 'vant'
import 'vant/es/button/style';
const show = ref(false);
const testClick = () => {
show.value = !show.value
};
</script>
实际发现，所有的样式都没有生效，但是点击事件可以正常点击，然后我们打开控制台，可以看到组件并没有被正常的编译成普通的div元素，所以Vant并没有生效。
会不会是不支持语法糖这种写法呢。然后换成官方提供的另一种写法再试试。
<script lang="ts">
import { ref } from 'vue'
import {
Button
} from 'vant'
import 'vant/es/button/style';
export default {
components: {
[Button.name]: Button,
},
setup() {
const show = ref<boolean>(false);
const testClick =()=> {
show.value = !show.value
}
return {
show,
testClick
}
}
}
</script>
去掉语法糖的写法，ui效果可以正常显示了
那么问题来了为什么换成这种语法糖的这种写法就不行了呢。
1、是不是版本不对的问题呢，然后降级，把Vant版本降为3版本再试试还是不行，这里就不演示了，有空的小伙伴可以去试试。
既然问题不是版本问题，那就还是在组件使用上有问题。
二、解决方法
1、如何找到解决办法
可以观察到，语法糖的形式，在引入组件的方式上，少了注册组件的这一步，因为语法糖的写法，会自动注册不需要手动注册组件。
我们可以看到我们从Vant导入的是Button组件，但是使用的时候用的是<van-button/>是不是组件名称使用错误的问题呢。我们把组件名改成<Button/>试试
<template>
<Button @click="testClick" type="primary">主要按钮{{ show }}</Button>
</template>
组件正常被编译了：
果然是组件名字错误了，醉了，那么vant官方文档那么写的原因可能就是为了突出是自家组件所以前面加了前缀<@_@>！！！
既然原因找到了，那么同样就知道怎么同样引入Button组件还可以使用<van-button/>的写法，可以使用组件别名。
import {
Button as VanButton
} from 'vant'
这样再使用<van-button/>就没有问题了。
三、问题出现原因
1、一个是对组件注册概念不清晰，误认为名称不匹配，是Vant官方提供的能力，可以直接使用，所以没去思考名称错误问题。
2、太依赖Vant文档。想当然可以直接拿来用
总结经验教训
还是应该经常去看vue官方文档去巩固基础知识点。就会避免这种问题。还有就是被文档误导。垃圾
到此这篇关于Vue3 Vant组件库使用过程中的避坑点的文章就介绍到这了,更多相关Vue3 Vant组件库内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue使用vue-video-player无法播放本地视频的问题及解决
这篇文章主要介绍了vue使用vue-video-player无法播放本地视频的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
这篇文章也是我自己开发的从无到有的过程，所以它可以为你提供一些Tree组件开发的思路，本文重点给大家介绍vue递归组件的简单实现，感兴趣的朋友跟随小编一起看看吧2019-04-04
使用vue开发的web项目中使用图表,可以使用v-charts,本文主要介绍了vue3中使用Vchart的示例代码,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
在本篇文章里小编给大家整理的是关于Vue代码整洁之去重的相关知识点内容，需要的朋友们学习下。2019-08-08
在 Vue 3 中，父子组件之间进行通信有多种方式，下面简单介绍下常见的方式及其用法和使用场景，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧2024-01-01
在Vue应用程序中,路由组件是构建单页应用的关键部分,传递参数给路由组件可以让我们动态地展示内容,处理用户输入,以及实现各种交互功能,本文就给大家介绍了六种Vue路由组件传递参数场景,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue3+echarts实现渐变色环形图过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了el-table 表格分页序号问题小结,本文通过实例代码图文效果展示给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-04-04
这篇文章主要介绍了vue如何使用mapbox对当前行政区划进行反选遮罩问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
Vue中watch、computed、updated三者的区别及用法
这篇文章主要介绍了Vue中watch、computed、updated三者的区别及用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论