Resumen de Vue3 usando la biblioteca de componentes Vant para evitar pozos

---

prefacio

El artículo de esta película describe principalmente algunos errores Vue3al usar la biblioteca durante el desarrollo . Vant UIDeje que los pequeños socios que tienen problemas entiendan rápidamente por qué. También haz un disco para ti mismo.

---

1. Problemas

La versión vue3 no usa vant, específicamente cuando usa componentes.
Ejemplo concreto: Vue版本3 - Vant版本4
Según la documentación oficial de Vant, podemos saber que los componentes deben ser introducidos y utilizados de esta forma

import {
    
     Button } from 'vant';

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

Pero en realidad descubrí que no podía surtir efecto de acuerdo con el documento oficial:
código fuente:

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

En realidad, se encontró que todos los estilos no tenían efecto, pero se podía hacer clic en el evento de clic normalmente, y luego abrimos la consola, podemos ver que el componente no se compiló en un elemento normal, por lo que no tuvo divefecto Vant.

¿Podría ser que el azúcar sintáctico no sea compatible? Luego cambie a otro método de escritura oficial y vuelva a intentarlo.

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

Retire el azúcar gramatical y uiel efecto se puede mostrar normalmente

Entonces surge la pregunta, ¿por qué no es posible reemplazarlo con este azúcar gramatical?
1. ¿Es un problema con la versión incorrecta? Luego cambie Vanta la versión 3 e intente nuevamente. Todavía no funciona. No lo demostraré aquí. Si tiene tiempo, puede intentarlo.
Dado que el problema no es un problema de versión, todavía hay un problema con el uso de componentes.

Dos, la solución

1. Cómo encontrar una solución
Se puede observar que en la forma de azúcar sintáctico, en la forma de introducir componentes, falta el paso de registrar componentes, porque la forma de azúcar sintáctico registrará componentes automáticamente sin registro manual.
Podemos ver que lo que importamos Vantes Buttonun componente, pero cuando lo usamos, <van-button/>¿es un problema que el nombre del componente se use incorrectamente? Cambiemos el nombre del componente <Button/>para probar

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

El componente se compila normalmente:

Efectivamente, el nombre del componente es incorrecto, borracho, entonces la razón por la que el vant documento oficial está escrito así puede ser para resaltar su propio componente, ¡así que se agrega el prefijo <@_@> delante de él! ! !
Ahora que se encuentra la razón, también sabemos cómo introducir Buttoncomponentes que también se pueden usar <van-button/>, y podemos usar alias de componentes.

import {
    
    
  Button as VanButton
} from 'vant'

<van-button/>De esta forma, no hay problema para volver a utilizarlo .

3. La causa del problema

1. Una es que el concepto de registro de componentes no está claro y creen erróneamente que el nombre no coincide. Es una capacidad oficial proporcionada por Vant y se puede usar directamente, por lo que no pensé en el nombre incorrecto.
2. Demasiada confianza en los documentos de Vant. Por supuesto que se puede utilizar directamente.

Lecciones aprendidas

Siempre debe acudir a la documentación oficial de vue para consolidar los puntos de conocimiento básicos. Este problema se evitará. También hay engaño por la documentación. Basura

Si hay algún problema con el artículo, indíquelo.