Cómo crear una página de actualización del proyecto Vue
1. Escenario
Al procesar una lista, a menudo es necesario actualizar la página actual después de eliminar un dato o agregar nuevos datos.
2. Problemas encontrados
1. Al usar vue-router para redirigir a la página actual, la página no se actualizará
2. Cuando se actualiza reload() o router.go(0), se recarga todo el navegador, lo que provoca parpadeos y una mala experiencia
3 Métodos
Proporcionar/inyectar combinación
Función: permite que los componentes ancestros inyecten dependencias en todos sus componentes descendientes, sin importar cuán profunda sea la jerarquía de componentes, siempre que las relaciones ascendentes y descendentes estén vigentes.
App.vue:
Declara el método de recarga, que puede controlar la visualización u ocultación de la vista del enrutador, controlando así la recarga de la página
tableList .vue:
Inyecta la dependencia de recarga proporcionada por el componente App.vue en la página, que se utiliza para inyectar la dependencia de recarga en la página después de que se completa la lógica (eliminar o agregar...). Cuando haya terminado (eliminar o agregar...), llame a this.reload() directamente para actualizar la página actual.
4. Uso de proporcionar/inyectar
Proporcionar: esta opción debe ser un objeto o una función que devuelva un objeto. Este objeto contiene propiedades que se pueden inyectar en sus objetos secundarios.
Inyección: matriz de cadenas u objeto cuyo valor clave es el nombre del enlace local
Consejo: Los enlaces de objeto y de proveedor no responden. Esto es intencional. Si pasa un objeto escuchable, sus propiedades de objeto aún responden.
Creo que después de leer los ejemplos de este artículo, dominas este método. Para obtener más información interesante, ¡presta atención a otros artículos relacionados en Gxl.com!
Lectura recomendada:
Cómo usar v-model y prometer implementar componentes emergentes de vue
Cómo usar Vue para empaquetar secundariamente el complemento axios en