Comment utiliser les composants Vue.js

Cette fois, je vais vous présenter la méthode d'utilisation des composants Vue.js , et quelles sont les précautions lors de l'utilisation des composants Vue.js. Voici des cas pratiques, prenons un. regarder.

1. Tous les composants Vue sont également des instances Vue, divisées en composants globaux et composants locaux. La méthode d'enregistrement est la suivante.

2fb1ec095997abb5abb99340125c8b3b
    b98f2d1b8b5d79f8c1b053de334aa7b583153a5025b2246e72401680bb5dd683
    6520631531c208a38051e59cee36c27853b801b01e70268453ed301cb998e90c94b3e26ee717c64999d7867364b1b4a3dbe41635306b450881218e857817dde0
    b98f2d1b8b5d79f8c1b053de334aa7b583153a5025b2246e72401680bb5dd683
    8c69b8c7e69a6890c44e58d7de1f3c9c
    6520631531c208a38051e59cee36c27853b801b01e70268453ed301cb998e90c94b3e26ee717c64999d7867364b1b4a3a95778579e16b0726f139f43cb421b7b2cacc6d41bbb37262a98f745aa00fbf03f1c4e4b6b16bbbd69b2ee476dc4f83aVue.component('my-component', { //全局组件，建议使用短横线分隔式命名组件  template: 'e388a4556c0f65e1904146cc1a846beeA custom component!94b3e26ee717c64999d7867364b1b4a3'})var Child = {
    template: 'e388a4556c0f65e1904146cc1a846beeA child component!94b3e26ee717c64999d7867364b1b4a3'}var app = new Vue({
    el: '#app',    
    components: { //局部组件，仅可在父作用域#app中使用
    'child-component':Child
    }　　
})var example = new Vue({
    el:'#example'})2cacc6d41bbb37262a98f745aa00fbf0

Remarque :

a. Il existe des restrictions sur les éléments parent-enfant tels que ff6d136ddc5fdfeffaf53ff6ee95f185, f5d188ed2c074f8b944552db028f98a1 Les éléments a34de1251f0d9fe1e645927f19a896e8 ne peuvent pas utiliser directement les modèles de composants et peuvent être spécifiés par l'attribut is, tel que aefc3baf03de7c3c7ca7059834a76d2bfd273fcf5bcad3dfdad3c41bd81ad3e5. Il n'y a pas de telles restrictions si vous utilisez une chaînemodèle (une chaîne littérale qui autorise les expressions intégrées) provenant de l'une des sources suivantes :

1) 504a63905e80b0689d69a3a31c4d4555

2) JavaScript Chaîne de modèle en ligne :

Vue.component('component1',{
    　　　　　　template: &#39;<tr><td>child component</td></tr>&#39;
　　　　});
　　　　Vue.component(&#39;component2&#39;,{
    　　　　　　template: &#39;<table><component1></component1></table>&#39;
　　　　});

3) Composant .vue

b. Les données dans l'instance du composant doivent être une fonction, sinon chaque instance du composant renverra une référence au même objet

2. Utilisez des combinaisons de composants parent-enfant

a. Le composant parent transmet les données au composant enfant

1) Les données attendues sont déclarées par les accessoires dans le composant enfant.

2) Il s'agit d'un flux de données unidirectionnel et les sous-composants ne peuvent pas modifier directement les accessoires.

　3) Si vous souhaitez définir la vérification du type d'accessoire, vous ne pouvez pas utiliser de tableau de chaînes, vous devez définir : 　　

props:{
　　　　　　　　 propA: Number,
　　　　　　　　 propB: [String, Number]
　　　　　　}

　　4) Si vous souhaitez ajouter des attributs non-prop, lorsque en utilisant des sous-composants, définissez cet attribut = "true" dans la balise.

b. Les composants enfants déclenchent des événements de composant parent

1) Utilisez $on(eventName) pour écouter les événements et $emit(eventName,optionalPayload) Événement déclencheur.

2) Combinée à l'instance vide définie, la communication entre composants non parent-enfant peut également être autorisée.

c. Combinaison de données du composant parent-enfant - en utilisant l'emplacement

1) Définissez 58cb293b8600657fad49ec2c8d37b472 dans le composant enfant, le composant parent peut distribuer le contenu vers l'emplacement par défaut ou spécifier slot=" nom_emplacement" .

2) Définissez slot-scope="props" dans le composant parent pour obtenir les propriétés de la balise slot du composant enfant.

3) Il convient de noter que le contenu du modèle de composant parent est compilé dans la portée du composant parent ; le contenu du modèle de composant enfant est compilé dans la portée du composant enfant.

　3. Autres

　a. Les composants peuvent être commutés dynamiquement via v-bind:is = "componentObject". Pour mettre en cache le composant découpé, ajoutez-y un élément parent 7c9485ff8c3cba5ae9343ed63c2dc3f7

b. Définissez ref="xx" dans le composant enfant, et le composant enfant peut être exploité par child = vm.$refs.xx. -- Juste une mesure d'urgence.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser les chaînes JavaScript

Comment implémenter la liaison de données bidirectionnelle dans l'applet WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!