Vue3 Creación de componentes de un solo archivo (SFC)
El componente de un solo archivo de Vue (es decir,*.vueel archivo, en inglés Single-File Component, abreviado SFC) es un formato de archivo especial que nos permite encapsular la plantilla, la lógica y los estilos de un componente Vue en un solo archivo.
En Vue3, puedes usar.vuearchivos para crear componentes de un solo archivo (Single File Components, SFCs). Este archivo contiene la plantilla, el código JavaScript y los estilos CSS del componente.
Ahora eliminaremos, a través denpm init vue@latestel comando, todo el contenido del proyecto de ejemplo creado (consulteInstalación de Vue3), para crear nuestra propia página web simple en Vue.
Antes de empezar a escribir código, elimina todo el contenido dentro de las etiquetas <template>, <script> y <style>, así como cualquier atributo como setup o scoped.
Tu archivo App.vue ahora debería verse así:
Archivo App.vue:
<template></template>
<style></style>
Al mismo tiempo, podemos vaciar primerosrclas carpetas en el directorioassetsycomponents, los archivos que contienen podemos agregarlos o complementarlos más tarde.
Modifica el código del archivo main.js al siguiente código:
Código del archivo main.js:
import App from './App.vue'
createApp(App).mount('#app')
Ahora hemos creado un proyecto simple. Escribe el siguiente código en el archivo App.vue:
Código del archivo App.vue:
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, EJEMPLO!'
}
}
}
</script>
<style>
h1 {
color: blue;
}
</style>
En el ejemplo anterior hemos definido un componente simple que contiene un título. La plantilla del componente incluye un elemento <h1> y utiliza la sintaxis de plantillas de Vue3 para vincular la propiedad message al contenido de texto de este elemento.
La parte de JavaScript contiene una función data que devuelve un objeto con la propiedad message; hemos vinculado esta propiedad a la plantilla.
Por último, los estilos CSS definen el color del título como azul.
En la parte de JavaScript del componente, usamos la nueva sintaxis export default, que nos permite exportar la definición del componente como un objeto predeterminado. En Vue3, podemos usar esta sintaxis para definir componentes sin tener que usar la función Vue.component como en Vue2.
Visitahttp://localhost:5173/, el resultado de ejecutar el código anterior es:
Usar componentes
Una vez que hemos definido un componente, podemos usarlo en otros componentes.
Para usar un componente, necesitamos crearlo primero. Por ejemplo, el siguiente ejemplo en el./src/components/directorio crea elHelloEjemplo.vuearchivo del componente, con el siguiente código:
Código del archivo ./src/components/HelloEjemplo.vue:
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Ejemplo!'
}
}
}
</script>
<style>
h1 {
color: red;
}
</style>
Luego importamos y definimos este componente en el archivo ./src/main.js:
Código del archivo ./src/main.js:
import App from './App.vue'
import HelloEjemplo from './components/HelloEjemplo.vue'
const app = createApp(App)
app.component('hello-ejemplo', HelloEjemplo) // etiqueta personalizada
app.mount('#app')
En la plantilla del componente padre, podemos usar etiquetas personalizadas para importar componentes hijos, como en el siguiente código del archivo App.vue:
Código del archivo App.vue
<div>
<hello-ejemplo></hello-ejemplo>
</div>
</template>
Visitahttp://localhost:5173/, el resultado de ejecutar el código anterior es:
