Advertir correctamente el uso incorrecto de v-Slot

Introducción

En este proyecto, aprenderás a corregir un error en el código de vue-router 3.1.3 donde la representación del componente falla al crear un componente de enlace de enrutador utilizando la API de v-slot y proporcionar múltiples elementos secundarios.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo localizar e identificar el problema en el código de vue-router 3.1.3
• Cómo corregir el problema modificando el código en el archivo link.js
• Cómo reconstruir y liberar el proyecto de vue-router 3.1.3 corregido
• Cómo verificar el efecto corregido probando la aplicación

🏆 Logros

Después de completar este proyecto, podrás:

• Solucionar y corregir problemas en una biblioteca de terceros
• Reconstruir y liberar un proyecto después de realizar cambios de código
• Probar y verificar la funcionalidad de un problema corregido

Skills Graph

Corregir el problema de la API de V-Slot en Vue-Router 3.1.3

Para comenzar, observa la estructura de directorio de los archivos en el lado izquierdo, como sigue:

├── vue-router-3.1.3
├── vue.js
└── index.html

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente, luego abre la opción "Consola" en la consola de tu navegador para previsualizar la página en tu navegador, como se muestra a continuación:

En este paso, corregirás el problema en el código de vue-router 3.1.3 donde la representación del componente falla al crear un componente de enlace de enrutador utilizando la API de v-slot y proporcionar múltiples elementos secundarios.

1. Abre el archivo vue-router-3.1.3/src/components/link.js.
2. Localiza el siguiente bloque de código:

if (scopedSlot) {
  if (scopedSlot.length === 1) {
    return scopedSlot[0];
  } else if (scopedSlot.length > 1 || !scopedSlot.length) {
    if (process.env.NODE_ENV !== "production") {
      warn(
        false,
        `RouterLink with to="${this.props.to}" is trying to use a scoped slot but it didn't provide exactly one child.`
      );
    }
    return scopedSlot.length === 0 ? h() : h("span", {}, scopedSlot);
  }
}

3. Actualiza el código como sigue:

if (scopedSlot) {
  if (scopedSlot.length === 1) {
    return scopedSlot[0];
  } else if (scopedSlot.length > 1 || !scopedSlot.length) {
    if (process.env.NODE_ENV !== "production") {
      warn(
        false,
        `RouterLink with to="${this.to}" is trying to use a scoped slot but it didn't provide exactly one child.`
      );
    }
    return scopedSlot.length === 0 ? h() : h("span", {}, scopedSlot);
  }
}

El principal cambio está en el mensaje de advertencia, donde this.props.to ha sido reemplazado por this.to.

Reconstruir y probar Vue-Router 3.1.3 corregido

En este paso, reconstruirás el proyecto de vue-router 3.1.3 y probarás el efecto corregido.

1. Abre el directorio vue-router-3.1.3 en la terminal.
2. Ejecuta el comando npm install para instalar las dependencias. Este proceso puede tomar un tiempo, por favor, sea paciente. (Si se atasca durante mucho tiempo, presione Ctrl+C para terminar el proceso y luego ejecute este comando nuevamente.)
3. Una vez que todas las dependencias se hayan instalado correctamente, ejecuta el comando npm run build para reconstruir y liberar el proyecto.
4. Haz clic en la opción "Web 8080" en la parte superior de la VM y actualiza la página manualmente.
5. Abre la consola del navegador y comprueba que ya no se muestra el error "TypeError: this.props is undefined".
6. Verifica que la página se esté representando correctamente con el problema corregido de la API de v-slot.

La imagen del efecto después de corregir el problema se muestra a continuación:

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.