Summary of Vue3 using Vant component library to avoid pits

---

foreword

The article in this film mainly writes some pitfalls Vue3when using the library during development . Vant UILet the small partners who have problems quickly understand why. Also make a record for yourself.

---

1. Problems

The vue3 version fails to use vant, specifically when using components.
Specific example: Vue版本3 - Vant版本4
According to the official documentation of Vant, we can know that the components should be introduced and used in this way

import {
    
     Button } from 'vant';

<van-button type="primary">主要按钮</van-button>

But I actually found that it could not take effect according to the official document:
source code:

<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>

It was actually found that all the styles did not take effect, but the click event could be clicked normally, and then we opened the console, we can see that the component was not compiled into a normal divelement, so Vantit did not take effect.

Could it be that syntactic sugar is not supported? Then change to another official writing method and try again.

<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>

Remove the grammatical sugar, and uithe effect can be displayed normally.

Then the question arises, why is it not possible to replace it with this grammatical sugar?
1. Is it a problem with the wrong version? Then downgrade Vantto version 3 and try again. It still doesn’t work. I won’t demonstrate it here. If you have time, you can try it.
Since the problem is not a version problem, there is still a problem with the use of components.

Two, the solution

1. How to find a solution
It can be observed that in the form of syntactic sugar, in the way of introducing components, the step of registering components is missing, because the way of syntactic sugar will automatically register components without manual registration.
We can see that what we Vantimported from is Buttona component, but when we use it, <van-button/>is it a problem that the component name is used incorrectly? Let's change the component name <Button/>to try

<template>
  <Button @click="testClick" type="primary">主要按钮{
   
   { show }}</Button>
</template>

The component is compiled normally:

Sure enough, the name of the component is wrong, drunk, then the reason why the vant official document is written like that may be to highlight its own component, so the prefix <@_@> is added in front of it! ! !
Now that the reason is found, then we also know how to introduce Buttoncomponents that can also be used <van-button/>, and we can use component aliases.

import {
    
    
  Button as VanButton
} from 'vant'

<van-button/>In this way, there is no problem to use it again .

3. The cause of the problem

1. One is that the concept of component registration is not clear, and they mistakenly believe that the name does not match. It is an official capability provided by Vant and can be used directly, so I did not think about the wrong name.
2. Too much reliance on Vant documents. Of course it can be used directly

Lessons Learned

You should always go to the official vue documentation to consolidate the basic knowledge points. This problem will be avoided. There is also misleading by the documentation. Rubbish

If there is any problem with the article, please point out the problem.