Qu'est-ce qu'un composant ?
Les composants sont de petits modules dans les applications Vue, des blocs de code pouvant être réutilisés. Les composants facilitent le développement de grandes applications car vous pouvez diviser le code en petits morceaux, chacun étant responsable d'une tâche spécifique, comme la construction de blocs Lego.
Création de composants
Il existe deux manières de créer des composants dans Vue :
- Enregistrer un composant
Utilisez la méthode Vue.component() pour enregistrer un composant global :
Vue.component('my-component', {
// 组件选项
// ...
})
- Enregistrez un composant local
pour enregistrer un composant local dans une instance Vue :
new Vue({
el: '#app',
components: {
'my-component': MyComponent // 局部注册组件
}
})
Utilisation de composants
Utilisez des composants dans les modèles :
<template>
<div>
<my-component></my-component>
</div>
</template>
Options des composants
- Modèle d'option de modèle
: modèle HTML du composant. Peut contenir d'autres composants et directives. Notez que l’option modèle ne peut pas être utilisée lors d’une inscription globale.
<template>
<div>
<p>{
{ msg }}</p> // 其他Vue选项或计算属性可以在组件的模板中使用。这里还能包含其他组件！
</div>
</template>
- Data option
data : L'objet de données du composant, qui peut contenir des données arbitraires. Notez que l’option de données ne peut pas être utilisée lors d’une inscription globale.
<script>
export default {
data() {
// 使用函数定义异步获取数据！这在加载大型数据集合时特别有用！)
}
- Options de méthode
: méthodes du composant, qui peuvent être appelées dans le modèle du composant. Les options de méthode ne peuvent pas être utilisées lors de l’inscription globale.
<script>
export default {
methods: {
greet() {
alert('Hello!')
}
}
}
</script>
- Option de propriété calculée
calculée : la propriété calculée du composant peut être utilisée dans le modèle du composant. L'option de propriété calculée ne peut pas être utilisée lors de l'inscription globale.
<script>
export default {
data() {
return {
message: 'Hello'
}
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
}
</script>
- Événements d'options d'événement
: événements que le composant peut écouter et déclencher, qui peuvent être utilisés dans le modèle du composant. Les options d'événement ne peuvent pas être utilisées lors de l'inscription globale.
<script>
export default {
events: {
click: 'greet' // 监听 click 事件，并在事件触发时调用 greet 方法。
},
methods: {
greet() {
alert('Hello!')
}
}
}
</script>
- Options de style styles
: style du composant, qui peut être utilisé dans le modèle du composant. Les options de style ne peuvent pas être utilisées lorsqu’elles sont enregistrées globalement. Les styles peuvent contenir d'autres modules CSS tels que less ou sass. Dans les options de style, vous pouvez utiliser le symbole & pour référencer les données du composant. Par exemple : couleur : &primaryColor;.
<script>
export default {
data() {
return {
primaryColor: 'blue'
}
},
styles: {
color: '&primaryColor' // 使用&来引用组件的数据对象中的primaryColor属性。
}
}
</script>
- Option de cycle de vie cycle de
vie : fonction de hook de cycle de vie du composant, qui peut être appelée lors de la création, de la mise à jour, de la destruction et d'autres phases du composant. Les options de cycle de vie ne peuvent pas être utilisées lors de l’inscription globale. Voici quelques fonctions de hook de cycle de vie courantes : créé() : appelé lorsque le composant est créé ; monté() : appelé lorsque le composant est monté sur le DOM ; mis à jour() : appelé lorsque le composant est mis à jour ; détruit() : appelé lorsque le composant est détruit. Notez que ces fonctions hook sont des options de fonction, et non des options de propriété ou de méthode calculées. Ci-dessous un exemple :
<script>
export default {
created() {
// 组件创建时调用。可以在这时初始化一些状态或执行一些操作。例如，初始化一个定时
},
mounted() {
// 组件挂载到DOM上时调用。可以在这时执行一些与DOM操作相关的操作。例如，获取组件的DOM元素。
this.$refs.myElement // 获取组件的引用，例如：this.$refs.myElement.style.color = 'red';
},
updated() {
// 组件更新时调用。可以在这时执行一些与数据更新相关的操作。例如，重新计算某个属性的值。
// ...
},
destroyed() {
// 组件销毁时调用。可以在这时执行一些清理操作。例如，取消定时器或解绑事件监听器。
// ...
}
</script>
}