¿Qué son los componentes?
Los componentes son pequeños módulos en aplicaciones Vue, bloques de código que se pueden reutilizar. Los componentes facilitan el desarrollo de aplicaciones grandes porque se puede dividir el código en partes pequeñas, cada una responsable de una tarea específica, como construir bloques de Lego.
Crear componentes
Hay dos formas de crear componentes en Vue:
- Registrar un componente
Utilice el método Vue.component() para registrar un componente global:
Vue.component('my-component', {
// 组件选项
// ...
})
- Registre un componente local
para registrar un componente local en una instancia de Vue:
new Vue({
el: '#app',
components: {
'my-component': MyComponent // 局部注册组件
}
})
Usar componentes
Usar componentes en plantillas:
<template>
<div>
<my-component></my-component>
</div>
</template>
Opciones de componentes
- Plantilla de opción de plantilla
: plantilla HTML del componente. Puede contener otros componentes y directivas. Tenga en cuenta que la opción de plantilla no se puede utilizar al registrarse globalmente.
<template>
<div>
<p>{
{ msg }}</p> // 其他Vue选项或计算属性可以在组件的模板中使用。这里还能包含其他组件！
</div>
</template>
- Datos de opción de datos
: el objeto de datos del componente, que puede contener datos arbitrarios. Tenga en cuenta que la opción de datos no se puede utilizar al registrarse globalmente.
<script>
export default {
data() {
// 使用函数定义异步获取数据！这在加载大型数据集合时特别有用！)
}
- Opciones de método
: métodos del componente, que se pueden llamar en la plantilla del componente. Las opciones del método no se pueden utilizar al registrarse globalmente.
<script>
export default {
methods: {
greet() {
alert('Hello!')
}
}
}
</script>
- Opción de propiedad calculada
calculada: la propiedad calculada del componente se puede utilizar en la plantilla del componente. La opción de propiedad calculada no se puede utilizar al registrarse globalmente.
<script>
export default {
data() {
return {
message: 'Hello'
}
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
}
</script>
- Eventos de opciones de eventos
: eventos que el componente puede escuchar y activar, que se pueden usar en la plantilla del componente. Las opciones de eventos no se pueden utilizar al registrarse globalmente.
<script>
export default {
events: {
click: 'greet' // 监听 click 事件，并在事件触发时调用 greet 方法。
},
methods: {
greet() {
alert('Hello!')
}
}
}
</script>
- Opciones de estilo estilos
: el estilo del componente, que se puede utilizar en la plantilla del componente. Las opciones de estilo no se pueden utilizar cuando se registran globalmente. Los estilos pueden contener otros módulos CSS como less o sass. En las opciones de estilo, puede utilizar el símbolo & para hacer referencia a los datos del componente. Por ejemplo: color: &primaryColor;.
<script>
export default {
data() {
return {
primaryColor: 'blue'
}
},
styles: {
color: '&primaryColor' // 使用&来引用组件的数据对象中的primaryColor属性。
}
}
</script>
- Opción de ciclo de vida
ciclo de vida: la función de enlace del ciclo de vida del componente, que se puede llamar durante la creación, actualización, destrucción y otras fases del componente. Las opciones del ciclo de vida no se pueden utilizar al registrarse globalmente. Las siguientes son algunas funciones de enlace de ciclo de vida comunes: creado(): se llama cuando se crea el componente; montado(): se llama cuando el componente está montado en el DOM; actualizado(): se llama cuando se actualiza el componente; destruido(): Se llama cuando el componente se destruye. Tenga en cuenta que estas funciones de enlace son opciones de función, no propiedades calculadas ni opciones de método. A continuación se muestra un ejemplo:
<script>
export default {
created() {
// 组件创建时调用。可以在这时初始化一些状态或执行一些操作。例如，初始化一个定时
},
mounted() {
// 组件挂载到DOM上时调用。可以在这时执行一些与DOM操作相关的操作。例如，获取组件的DOM元素。
this.$refs.myElement // 获取组件的引用，例如：this.$refs.myElement.style.color = 'red';
},
updated() {
// 组件更新时调用。可以在这时执行一些与数据更新相关的操作。例如，重新计算某个属性的值。
// ...
},
destroyed() {
// 组件销毁时调用。可以在这时执行一些清理操作。例如，取消定时器或解绑事件监听器。
// ...
}
</script>
}