O que é um componente?
Componentes são pequenos módulos em aplicações Vue, blocos de código que podem ser reutilizados. Os componentes facilitam o desenvolvimento de aplicações grandes porque você pode dividir o código em pequenos pedaços, cada um responsável por uma tarefa específica, como construir blocos de Lego.
Criando componentes
Existem duas maneiras de criar componentes no Vue:
- Registrar um componente
Use o método Vue.component() para registrar um componente global:
Vue.component('my-component', {
// 组件选项
// ...
})
- Registre um componente local
para registrar um componente local em uma instância Vue:
new Vue({
el: '#app',
components: {
'my-component': MyComponent // 局部注册组件
}
})
Usando componentes
Use componentes em modelos:
<template>
<div>
<my-component></my-component>
</div>
</template>
Opções de componentes
- Modelo de opção de modelo
: modelo HTML do componente. Pode conter outros componentes e diretivas. Observe que a opção de modelo não pode ser usada ao registrar-se globalmente.
<template>
<div>
<p>{
{ msg }}</p> // 其他Vue选项或计算属性可以在组件的模板中使用。这里还能包含其他组件！
</div>
</template>
- Dados de opção de dados
: O objeto de dados do componente, que pode conter dados arbitrários. Observe que a opção de dados não pode ser usada ao registrar-se globalmente.
<script>
export default {
data() {
// 使用函数定义异步获取数据！这在加载大型数据集合时特别有用！)
}
- Opções de método
: métodos do componente, que podem ser chamados no template do componente. As opções de método não podem ser usadas ao registrar-se globalmente.
<script>
export default {
methods: {
greet() {
alert('Hello!')
}
}
}
</script>
- Opção de propriedade computada
computada: a propriedade calculada do componente pode ser usada no modelo do componente. A opção de propriedade computada não pode ser usada ao registrar-se globalmente.
<script>
export default {
data() {
return {
message: 'Hello'
}
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
}
</script>
- Eventos de opções de evento
: eventos que o componente pode escutar e disparar, que podem ser usados no modelo do componente. As opções de evento não podem ser usadas ao registrar-se globalmente.
<script>
export default {
events: {
click: 'greet' // 监听 click 事件，并在事件触发时调用 greet 方法。
},
methods: {
greet() {
alert('Hello!')
}
}
}
</script>
- Opções de estilo
estilos: O estilo do componente, que pode ser usado no modelo do componente. As opções de estilo não podem ser usadas quando registradas globalmente. Os estilos podem conter outros módulos CSS, como less ou sass. Nas opções de estilo, você pode usar o símbolo & para fazer referência aos dados do componente. Por exemplo: cor: &primaryColor;.
<script>
export default {
data() {
return {
primaryColor: 'blue'
}
},
styles: {
color: '&primaryColor' // 使用&来引用组件的数据对象中的primaryColor属性。
}
}
</script>
- Opção de ciclo de vida
ciclo de vida: A função de gancho do ciclo de vida do componente, que pode ser chamada durante a criação, atualização, destruição e outras fases do componente. As opções de ciclo de vida não podem ser usadas ao registrar-se globalmente. A seguir estão algumas funções comuns de gancho do ciclo de vida: criado(): chamado quando o componente é criado; montado(): chamado quando o componente é montado no DOM; atualizado(): chamado quando o componente é atualizado; destruído(): chamado quando o componente é destruído. Observe que essas funções de gancho são opções de função, não propriedades computadas ou opções de método. Abaixo está um exemplo:
<script>
export default {
created() {
// 组件创建时调用。可以在这时初始化一些状态或执行一些操作。例如，初始化一个定时
},
mounted() {
// 组件挂载到DOM上时调用。可以在这时执行一些与DOM操作相关的操作。例如，获取组件的DOM元素。
this.$refs.myElement // 获取组件的引用，例如：this.$refs.myElement.style.color = 'red';
},
updated() {
// 组件更新时调用。可以在这时执行一些与数据更新相关的操作。例如，重新计算某个属性的值。
// ...
},
destroyed() {
// 组件销毁时调用。可以在这时执行一些清理操作。例如，取消定时器或解绑事件监听器。
// ...
}
</script>
}