Composants fonctionnels Un composant fonctionnel est sans état, il ne peut pas être instancié et n'a pas de cycle de vie ou de méthodes. La création d'un composant fonctionnel est également simple, il suffit d'ajouter une déclaration de fonction dans le modèle. Il convient généralement aux composants qui ne dépendent que des modifications de données externes et améliore les performances de rendu en raison de sa légèreté. Tout ce dont le composant a besoin est transmis via le paramètre de contexte. C'est un objet de contexte, voir la documentation pour les propriétés spécifiques. Ici, props est un objet contenant toutes les propriétés liées.
<template functional>
<div class="list">
<div class="item" v-for="item in props.list" :key="item.id" @click="props.itemClick(item)">
<p>{
{item.title}}</p>
<p>{
{item.content}}</p>
</div>
</div>
</template>
Le composant parent utilise
<template>
<div>
<List :list="list" :itemClick="item => (currentItem = item)" />
</div>
</template>
import List from @/components/List.vue
export default {
components: {
List
},
data() {
return {
list: [{
title: title ,
content: content
}],
currentItem:
}
}
}
3. Portée du style Il est très courant de modifier le style des composants tiers en développement, mais en raison de l'isolement du style de l'attribut scoped, il peut être nécessaire de supprimer le scoped ou de créer un nouveau style. Ces pratiques ont des effets secondaires (pollution de style de composant, manque d'élégance) et utilisent la pénétration de style dans le préprocesseur css pour prendre effet. Nous pouvons utiliser >>> ou /deep/ pour résoudre ce problème :
<style scoped>
Outer layer >>> .el-checkbox {
display: block;
font-size: 26px;
.el-checkbox__label {
font-size: 16px;
}
}
</style>
<style scoped>
/deep/ .el-checkbox {
display: block;
font-size: 26px;
.el-checkbox__label {
font-size: 16px;
}
}
</style>