Cet article fait référence aux documents officiels pour compiler un code plus détaillé et est un tutoriel plus sécurisé pour les débutants à lire et à apprendre.
Cet article vient du document officiel:
http://cn.vuejs.org/guide/components.html
Que sont les composants?
Le composant est 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.
Définition des composants
① Fonction des composants:
【1】 étendre les éléments HTML et encapsuler le code réutilisable;
【2】 Les composants sont des éléments personnalisés et le compilateur de Vuejs peut y ajouter des fonctions spéciales;
【3】 Dans certains cas, les composants peuvent prendre la forme d'éléments HTML natifs, s'étendant d'une manière semblable.
② Écrivez un composant standard:
Il est divisé en les étapes suivantes:
[1] L'endroit où le composant est monté doit être l'élément HTML rendu par l'instance Vue. Plus précisément, par exemple, l'élément HTML tel que <div id = ”app”> </div> ci-dessus et ses nœuds enfants;
【2】 Définissez un composant, utilisez
var name de variable = vue.Extend ({modèle: "Voici le contenu de modèle de html"}) est créé sous la forme de "var btn = vue.Extend ({template:" <Futton> Il s'agit d'un bouton </futh> "})【3】 Enregistrez le composant défini à l'instance Vue, qui permettra à la balise spécifiée d'être remplacée par le contenu du composant.
Comme code:
// L'inscrivez-le sur Vue.Component ("Add-Button", BTN);Plus précisément, chacune des balises suivantes (dans le cadre de l'instance racine de Vue)
<dd-button> </djout-button>
Sera
<button> Il s'agit d'un bouton </frut
Remplacé.
[4] La méthode ci-dessus est l'enregistrement global (la balise Add-Button de chaque instance Vue sera remplacée par ce que nous définissons);
La solution est l'enregistrement local.
Par exemple, Code: (Il s'agit de l'attribut de modèle est défini. Vous pouvez également placer la balise <dd-button> </ddd-button> dans la balise <div id = "app"> </div> lorsque cet attribut n'est pas disponible.
<div id = "app"> </ div> <script> // Définissez un composant var btn = vue.Extend ({template: "<button> Ceci est un bouton </futton>"}) vue.component ("Add-Button", btn); // Créez une instance racine, c'est-à-dire que Vue prenne effet sur ce root var vm = new Vue ({el: '#App', modèle: "<djout-button> </dd-button>"}); </cript>③ Composants d'enregistrement locaux:
Autrement dit, il ne prend effet que sur cette instance VUe. La méthode spécifique consiste à ignorer l'étape d'enregistrement;
Ensuite, lors de la déclaration de l'instance Vue, elle sera ajoutée à la propriété des composants (c'est un objet, placé sous forme KV) (notez que ce mot a un autre s)
Comme code:
<div id = "app"> </ div> <cript> // Définir un composant var btn = vue.extend ({template: "<button> Ceci est un bouton </utton>"}) // Créer une instance racine, c'est-à-dire Vue prendre effet sur ce root var vm = new Vue ({el: '#app', template: "<ajout-buutton> "Add-Button": btn}}); </cript>Note:
Selon le tutoriel officiel, cette méthode (se référant à l'enregistrement local) est également applicable à d'autres ressources, telles que les directives, les filtres et les transitions.
④Simplifiez les étapes:
【1】 La définition des composants et des composants d'enregistrement sont terminés en une seule étape:
// Définir un composant vue.component ("Add-Button", {Template: "<Fut-Button> Ceci est un bouton </fontificateur>"});【2】 Lors de l'enregistrement local, l'étape de définition et d'enregistrement est terminée:
// Créer une instance root, c'est-à-dire que Vue prenne effet sur cette racine var vm = new Vue ({el: '#App', modèle: "<dd-buutton> </djout-button>", composants: {"add-buutton": {template: "<Futton> Il s'agit d'un bouton </ bouton>"}});⑤Data Attributs
Il n'est pas possible d'ajouter directement des attributs de données au composant (non valide);
La raison en est que si cela est fait, l'attribut de données du composant peut être un objet, et cet objet peut également être transmis en externe (par exemple, déclarer d'abord un objet, puis l'objet est la valeur des données), ce qui peut entraîner toutes les copies du composant pour partager un objet (cet externe transmis), ce qui est évidemment faux.
Par conséquent, l'attribut de données doit être une fonction, puis il y a une valeur de retour, qui est la valeur de l'attribut de données.
Et cette valeur de retour devrait être un nouvel objet (c'est-à-dire une copie profonde, en évitant plusieurs composants partageant un objet);
Comme code:
var vm = new vue ({el: '#app', modèle: "<jout-buntton> </djout-button>", composants: {"add-buut": {template: "<utton> Ceci est un bouton {{btn}} </ bouton>", data: function () {return {btn: "123"};}}}});De plus, si c'est le cas, la valeur de BTN est la même (car ils partagent réellement un objet)
<div id = "app"> </ div> <div id = "app2"> </div> <cript> var obj = {btn: "123"}; var vm = new vue ({el: '#app', modèle: "<jout-buntton> </djout-button>", composants: {"add-buut": {template: "<utton> Ceci est un bouton {{btn}} </ bouton>", data: function () {return obj;}}})); obj.btn = "456"; var vm2 = new Vue ({el: '# app2', modèle: "<jout-buntton> </dd-button>", composants: {"add-buut": {template: "<button> Ceci est un bouton {{btn}} </ bouton>", data: function () {return obj;}}}}); </cript>Note:
Lorsque l'attribut EL est utilisé dans vue.extend (), il doit également être une fonction.
Les fonctionnalités: sont des fonctionnalités:
[1] Selon le tutoriel officiel, certains éléments HTML ont des restrictions sur les éléments qui peuvent y être placés;
Mais en fait, je n'ai trouvé aucun problème avec mon propre test, donc je ne comprends pas.
【2】 Donnez-moi une URL, si quelque chose se passe vraiment, je vais l'étudier.
http://cn.vuejs.org/guide/components.html#u6a21_u677f_u89e3_u6790
Ce qui précède est un exemple d'analyse de la définition de la composante VueJS dans le 8ème chapitre de Vuejs présenté à vous. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!