Qu'est-ce qu'un composant: les composants sont l'une des caractéristiques les plus puissantes de Vue.js. Les composants peuvent étendre les éléments HTML et encapsuler le code réutilisable. À un niveau supérieur, les composants sont des éléments personnalisés et le compilateur de Vue.js y ajoute des fonctionnalités spéciales. Dans certains cas, les composants peuvent également être sous la forme d'éléments HTML natifs, étendus avec la caractéristique IS.
Comment enregistrer les composants?
Vous devez créer un composant à l'aide de la méthode Vue.Extend, puis enregistrer le composant à l'aide de la méthode Vue. Le format de la méthode Vue.Extend est le suivant:
var myComponent = vue.Extend ({// Options ... Je vais le présenter plus tard})Si vous souhaitez utiliser ce composant créé ailleurs, vous devez le nommer:
Vue.Component («My-composant», MyComponent)
Après la dénomination, vous pouvez utiliser ce nom de composant dans la balise HTML, tout comme l'utilisation d'un élément DOM. Jetons un coup d'œil à un exemple complet d'enregistrement et d'utilisation des composants.
Code html:
<div id = "example"> <my-composant> </ my-composant> </div>
Code js:
// define var myComponent = vue.Extend ({template: '<div> un composant personnalisé! </div>'}) // registre vue.component ('my-composant', myComponent) // Créer une instance racine new vue ({el: '#example'})Résultat de sortie:
<div id = "example"> <div> un composant personnalisé! </div> </ div
Composants imbriqués
Le composant lui-même peut également contenir des composants. Le composant parent suivant contient un composant nommé enfant-composant, mais ce composant ne peut être utilisé que par les composants parents:
var child = vue.extend ({template: '<div> un composant personnalisé! </div>'}); var parent = vue.extend ({template: '<div> composant parent: </ child-component': enfant}}); vue.component ("parent-component", parent);Le processus de définition ci-dessus est assez lourd, et vous n'avez pas besoin d'appeler les méthodes Vue.Component et Vue.Extend à chaque fois:
// Extension et enregistrement vue.component ('my-composant', {template: '<div> un composant personnalisé! </div>'}) // Ceci est également possible avec le registre local var parent = vue.extend ({composant: {'my-composant': {template: '<v> un composant personnalisé! </v>'}}})Composants dynamiques
Plusieurs composants peuvent utiliser le même point de montage, puis basculer dynamiquement entre eux. Utilisez l'élément <Component> réservé pour se lier dynamiquement à sa propriété IS. Les colonnes ci-dessous ont trois composants à domicile, les poteaux et les archives installés sous la même instance VUE, et changent dynamiquement d'affichage des composants via la fonction CurrentView.
Code html:
<div id = "dynamic"> <button id = "home"> home </ bouton> <button id = "poteaux"> Publier </ bouton> <bouton id = "archive"> archive </utton> <br> <balleux: is = "currentView"> </ Component> </div>
Code js:
var vue = new vue ({el: "# dynamic", data: {currentView: "home"}, composants: {home: {template: "home"}, poteaux: {template: "poteaux"}, archive: {template: "archive"}}}); document.getElementyd ("home"). onClick = function () {vue. "home";}; document.getElementById ("Posts"). onClick = function () {vue.currentView = "Posts";}; document.getElementById ("archive"). onclick = function () {vue.currentView = "Archive";};Composants et V-For
<my-composant v-for = "item in items"> </ my-composant>
Les données ne peuvent pas être transmises à un composant car la portée du composant est indépendante. Pour transmettre des données aux composants, les accessoires doivent être utilisés:
<ma composant
V-for = "Article dans les éléments"
: item = "item"
: index = "$ index">
</ my-composant>
La raison pour laquelle l'élément n'est pas automatiquement injecté dans le composant est que cela entraîne étroitement le composant au v-FOR actuel. Déclarer explicitement d'où proviennent les données et peuvent être réutilisées ailleurs pour les composants.
Principe réactif approfondi
Lorsqu'un composant lie les données, comment la liaison peut-elle être efficace et peut modifier et ajouter dynamiquement les attributs? Jetez un œil à l'introduction des principes suivants.
Comment suivre les modifications: passer un objet différent à l'instance Vue comme option aux données, Vue.js traversera ses propriétés et la convertira en getter / setter avec object.defineproperty. Il s'agit d'une fonctionnalité ES5, et tous les Vue.js ne prennent pas en charge IE8 ou plus bas.
Chaque liaison d'instructions / données dans le modèle a un objet d'observateur correspondant, qui enregistre les attributs sous forme de dépendances pendant le processus de calcul. Après cela, lorsque le secteur dépendant est appelé, le recalcul de l'observateur sera déclenché. Le processus est le suivant:
Problème de détection de modification: Vue.js ne peut pas détecter l'addition ou la suppression des propriétés de l'objet. Les propriétés doivent être sur des données pour permettre à Vue.js de la convertir en mode Getter / Setter pour être réactive. Par exemple:
var data = {a: 1}; var vm = new Vue ({data: data}); // `vm.a` et` data.a` sont désormais réactifs vm.b = 2 // `vm.b` n'est pas réactif.Cependant, il existe des moyens d'ajouter des attributs après la création d'instructions et de le rendre correspondant. Vous pouvez utiliser la méthode d'instance SET (clé, valeur):
VM. set ('b', 2)
// `vm.b` et` data.b` sont maintenant réactifs
Pour les objets normaux, vous pouvez utiliser des méthodes globales: vue.set (objet, clé, valeur):
Vue.set (data, 'c', 3)
// `vm.c` et` data.c` sont maintenant réactifs
Initialiser les données: Bien que Vue.js fournit une addition dynamique des propriétés correspondantes, il est recommandé de déclarer toutes les propriétés correspondantes sur l'objet de données.
Ne faites pas ceci:
var vm = new Vue ({template: '<div> {{msg}} </div>'}) // Ajoutez ensuite `msg`vm. $ set ('msg', 'bonjour!')Cela devrait être fait:
var vm = new Vue ({data: {// Declare `msg` msg: ''}, modèle: '<div> {{msg}} </div>'}) // Définit` msg`vm.msg = 'Bonjour!'Étui complet du composant
Les exemples introduits ci-dessous implémentent la fonction de fenêtre modale et le code est relativement simple.
Code html:
<! - Implémentez le script pour définir un modèle -> <script type = "x / template" id = "modal-template"> <! - Si le modèle est affiché est défini via V-show = "show", Transition Set Effet d'animation -> <div V-show = "show" transition = "modal"> <div> <v> <v> <! En-tête </slot> </ div> <div> <! - Slot est équivalent à l'espace réservé du corps -> <slot name = "Body"> Bodyholder par défaut </slot> </ div> <v> <! - Slot est équivalent à Footer Placeholder -> <slot name = "footer"> Footer par défaut </slot> </ bouton @ click = "show"> ok> </div> </div> </ div> </ div> </ div> </ div> </div> </div> </ script> <div id = "app"> <! - Définissez l'attribut d'instance Vue lorsque vous cliquez sur le bouton. La valeur de ShowModal est vrai -> <bouton id = "show-modal" @ click = "showModal = true"> Show Modal </futton> <! - Modal est un plug-in personnalisé. La fonctionnalité du plug-in montre la fonctionnalité ShowModal de l'instance Vue -> <modal: show.sync = "showmodal"> <! - Remplacez le contenu de l'emplacement dans le plugin modal, puis soyez l'en-tête -> <h3 slot = "header"> En-tête personnalisé </h3> </doal> </v>
Code js:
// Définissez un plug-in avec le nom modalvue.component ("modal", {// Le modèle du plug-in est lié au contenu de l'élément DOM avec l'ID du modèle modal-template: "# modal-template", props: {// le type est booléen show: {type: boolean, obligé: true, twoway: true}}}}); // Instanciate vue, la portée est sous l'ID de l'élément de l'application, new Vue ({el: "#App", data: {// La valeur par défaut est false showModal: false}});Code CSS:
.Modal-mask {position: fixe; Z-Index: 9998; en haut: 0; à gauche: 0; Largeur: 100%; hauteur: 100%; Color d'arrière-plan: RGBA (0, 0, 0, .5); Affichage: table; transition: opacité .3s facilite;}. modal-wrapper {display: table-cell; Vertical-Align: Middle;}. Modal-Container {largeur: 300px; marge: 0px automatique; rembourrage: 20px 30px; Color d'arrière-plan: #FFF; Border-Radius: 2px; Box-shadow: 0 2px 8px rgba (0, 0, 0, .33); Transition: toutes les .3s facilité; Font-Family: Helvetica, Arial, Sans-Serif;}. Modal-Header H3 {margin-top: 0; Couleur: # 42B983;}. Modal-Body {margin: 20px 0;}. Modal-Default-Button {float: right;} / ** Les styles suivants sont automatiquement appliqués aux éléments avec * V-transition = "Modal" lorsque leur visibilité est basculée * par Vue.Js. .Modal-leave {opacité: 0;}. Modal-enter .modal-container, .modal-leave .modal-container {-webkit-transform: scale (1.1); transformée: échelle (1.1);}Cet article a été compilé dans le tutoriel d'apprentissage des composants frontaux "Vue.js", et tout le monde est le bienvenu pour apprendre et lire.
Pour les tutoriels sur les composants Vue.js, veuillez cliquer sur le tutoriel d'apprentissage de la composante Vue.js spéciale pour apprendre.
Comme je n'ai pas utilisé les fonctions des composants en profondeur dans le projet, je n'ai pas de compréhension approfondie des composants et l'introduction est relativement superficielle. Merci pour votre lecture.