1. Concepto de componente
2. Clasificación de componentes
2.1 Componentes básicos
2.2 Componentes ampliados
2.3 Especificación de easycom
3. Componentes personalizados y uso
3.1 Registro local
3.2 Registro global
1. Concepto de componente
Permítanme hablar primero de lo que es un componente
Declaración oficial:
Los componentes son los componentes básicos de la capa de vista. Un componente es una encapsulación de un módulo funcional único y reutilizable.
De hecho, los componentes pueden entenderse como equivalentes a una etiqueta en html, por ejemplo, div de etiqueta rápida, extensión de etiqueta de fila.
2. Clasificación de componentes
Los componentes de uni-app se dividen en componentes básicos y componentes ampliados.
2.1 Componentes básicos
Los componentes básicos están integrados en el marco de la aplicación uni, incluidas docenas de componentes básicos como vista, texto, entrada, botón, video, etc. Los componentes comunes pueden consultar el sitio web oficial: componentes básicos de la aplicación uni. Pero solo los componentes básicos los componentes no son
suficientes, habrá muchos componentes encapsulados en el desarrollo real.
2.2 Componentes de extensión
Aunque todos los requisitos comerciales se pueden cumplir a través de componentes básicos, solo los componentes básicos son ineficientes y habrá muchos componentes encapsulados en el desarrollo real. Este es el significado de los componentes de extensión. A excepción de los componentes básicos, todos se denominan componentes extendidos. Los componentes de extensión deben importarse al proyecto antes de que puedan usarse.
Ventajas de encapsular extensiones:
- Los componentes se pueden reutilizar cualquier número de veces.
- La división razonable de componentes ayuda a mejorar el rendimiento de la aplicación.
- El código es más conveniente de organizar y administrar, y la escalabilidad también es más sólida, lo que es conveniente para que varias personas desarrollen en colaboración.
- El desarrollo basado en componentes puede mejorar en gran medida la eficiencia, la capacidad de prueba y la reutilización del desarrollo de aplicaciones.
El uso de componentes de extensión se puede importar directamente al proyecto desde el mercado de complementos a través de Hbuilder, y uni_modulesgeneralmente se usa el directorio de importación predeterminado. Dirección del complemento: https://ext.dcloud.net.cn/
2.3 especificación easycom
Compatible con HBuilderX 2.5.5
Los componentes tradicionales de vue deben instalarse, referenciarse, registrarse y los componentes se pueden usar después de tres pasos. easycom lo reduce a un solo paso.
Siempre que los componentes estén instalados en el directorio de componentes del proyecto o en el directorio uni_modules y se ajusten a components/组件名称/组件名称.vuela estructura del directorio. Se puede utilizar directamente en la página sin referencia ni registro.
easycom se abre automáticamente y no es necesario abrirlo manualmente.
Si el nombre o la ruta de su componente no se ajusta a las especificaciones predeterminadas de easycom, puede personalizar la configuración en el nodo de easycom de pages.json para personalizar la estrategia de coincidencia de componentes. Para obtener más información, consulte:
https://uniapp.dcloud.net.cn/collocation/pages.html#easycom
3. Componentes personalizados y uso
La estructura del directorio es la siguiente:
Crear componente: mi-componente
<template>
<view class="my-componet-box">
{
{
title}}
</view>
</template>
<script>
export default {
// 声明组件名
name:"my-componet",
data() {
return {
title:'我是自定义组件!'
};
}
}
</script>
<style>
.my-componet-box{
width: 100rpx;
height: 120rpx;
background-color: green;
}
</style>
3.1 Registro parcial
Registro parcial (solo se usa en la página de registro, el ejemplo se usa en la página de prueba):
<template>
<view>
<!-- 3.使用组件 -->
<my-componet></my-componet>
</view>
</template>
<script>
// 1.导入组件
import myComponet from '@/components/my-componet/my-componet.vue'
export default {
// 2.注册组件
components:{
myComponet
},
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
Visualización de efectos, los componentes personalizados se muestran en la página de prueba:
3.2 Registro mundial
Registro global (disponible en todas las páginas):
En main.js:
import Vue from 'vue'
import myComonet from '@/components/my-component'
Vue.component('my-comonet',myComonet )
El ejemplo se usa en la página de la mina (puede usarlo directamente, no es necesario importar y registrarse):
<template>
<view>
<my-componet></my-componet>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
Efecto de visualización:
para ver más componentes en uniapp, consulte:
https://uniapp.dcloud.net.cn/tutorial/vue-components.html