Résumé des conseils d'implémentation des composants Vue

Cet article présente principalement un résumé des conseils d'implémentation des composants Vue. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Component, comme son nom l'indique, consiste à faire abstraction d'une fonction relativement indépendante qui sera utilisée plusieurs fois dans un composant ! Si nous voulons abstraire une certaine fonction dans un composant, nous devons faire de ce composant une boîte noire pour les autres. Ils n'ont pas besoin de se soucier de la façon dont elle est implémentée, il leur suffit de l'appeler selon l'interface convenue !

J'ai utilisé une image pour résumer brièvement la composition des composants dans Vue :

Vous pouvez voir qu'il y a pas mal de choses incluses dans le composant , et , il y a encore de nombreux points non répertoriés, et chaque point de connaissance ici peut être beaucoup développé et discuté. Cependant, nous ne parlons pas ici de principes, seulement d’usage.

Prenons comme exemple une fenêtre contextuelle de conseils pour appliquer de manière exhaustive les points de connaissance des composants suivants. astuces fenêtre contextuelle, presque tous les frameworks ou bibliothèques de classes auront le composant fenêtre contextuelle, car la fonction de fenêtre contextuelle est généralement très courante et le module est fortement découplé !

1. Conventions d'interface

Les fenêtres contextuelles que nous implémentons ici incluent : les accessoires, l'événement, l'emplacement, la référence, etc. Ici, nous pouvons également voir comment chaque point de connaissance est utilisé.

/**
 * modal 模态接口参数
 * @param {string} modal.title 模态框标题
 * @param {string} modal.text 模态框内容
 * @param {boolean} modal.showbtn 是否显示按钮
 * @param {string} modal.btnText 按钮文字
 */

 Vue.component('tips', {
  props : ['tipsOptions'],
  template : '#tips',

  data(){
    return{
      show : false
    }
  },

  computed:{
    tips : {
      get() {
        let tips = this.tipsOptions || {};
        tips = {
          title: tips.title || '提示',
          text: tips.text || '',
          showbtn : tips.showbtn || true,
          btnText : tips.btnText || '确定'
        };
        // console.log(tips);
        return tips;
      }
    }
  }
})

2. La mise en œuvre du composant modal

le composant astuces est relativement simple à mettre en œuvre, seulement un simple popup utilisé pour inviter l'utilisateur.

Modèle :

<p class="tips" v-show="show" transition="fade">
  <p class="tips-close" @click="closeTips">x</p>
  <p class="tips-header">
    <slot name="header">
      <p class="title">{{tips.title}}</p>
    </slot>
  </p>
  <p class="tips-body">
    <slot name="body">
      <p class="notice">{{tips.text}}</p>
    </slot>
  </p>
  <p class="tips-footer">
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" v-if="tips.showbtn" @click="yes" >{{tips.btnText}}</a>
  </p>
</p>

La structure du modèle est divisée en trois parties : titre, contenu et zone d'opération. Ici, vous pouvez soit utiliser des accessoires pour transmettre des chaînes, soit utiliser des emplacements pour la personnalisation.

Style des astuces :

.tips {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 1001;
  -webkit-overflow-scrolling: touch;
  max-width: 690px;
  width: 260px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 0 10px #888;
  border-radius: 4px;
}
.tips-close{
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}
.tips-header{
  text-align: center;
  font-size: 25px;
}

Méthodes au sein du composant :

methods:{
  closeTips(){
    this.show = false;
  },

  yes : function(){
    this.show = false;
    this.$emit('yes', {name:'wenzi', age:36}); // 触发yes事件
  },

  showTips(){
    var self = this;
    self.show = true;

    setTimeout(function(){
      // self.show = false;
    }, 2000)
  }
}

3. Appelez le composant astuces

Nous commençons d'abord à rendre le composant :

<p class="app">
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" @click="showtips">显示</a>
  <tips :tips-options="tipsOptions" ref="dialog" @yes="yes" v-cloak >
    <h3 slot="header">提示标题</h3>
    <p slot="body">
      <p>hello world</p>
      <p>wenzi</p>
    </p>
  </tips>
</p>

Cliquez sur le bouton Afficher. pour afficher les conseils. ：

var app = new Vue({
  el : '.app',

  data : {
    tipsOptions : {
      title : 'tip'
    }
  }

  methods:{
    // 监听从组件内传递出来的事件
    yes(args){
      // console.log( args );
      alert( JSON.stringify(args) );
    },

    // 显示tips
    showtips(){
      // console.log( this.$refs );
      this.$refs.dialog.showTips();
    }
  }
})

4.Résumé

Dans ce composant de conseils simples, nous implémentons le utilisation des accessoires Transmettez les paramètres, utilisez $emit pour transmettre les paramètres et utilisez les emplacements pour personnaliser le contenu.

Il convient de noter que les accessoires de composant sont une liaison unidirectionnelle, c'est-à-dire que lorsque les propriétés du composant parent changent, le composant enfant peut recevoir les modifications de données correspondantes, mais une erreur se produit à son tour. Autrement dit, les données transmises par les accessoires ne peuvent pas être modifiées dans le composant enfant pour atteindre l'objectif de modification des propriétés du composant parent. Cela permet d'éviter que les composants enfants ne modifient accidentellement l'état du composant parent.

De plus, chaque fois que le composant parent est mis à jour, tous les accessoires du composant enfant seront mis à jour avec les dernières valeurs. Cela signifie que vous ne devez pas modifier les accessoires à l'intérieur des composants enfants. Si vous faites cela, Vue vous avertira dans la console. Si vous avez vraiment besoin d'apporter des modifications au sous-composant, vous pouvez utiliser ces deux méthodes :

Définissez une variable locale et initialisez-la avec la valeur de prop :

props: ['initialCounter'],
data: function () {
 return { counter: this.initialCounter }
}

Définissez une propriété calculée, traitez la valeur de la prop et renvoyez-la.

props: ['size'],
computed: {
 normalizedSize: function () {
  return this.size.trim().toLowerCase()
 }
}

Bien sûr, il ne s'agit que de l'implémentation de composants sur une seule page. Nous implémenterons également des composants plus complexes à l'avenir.

Recommandations associées :

Résumé des conseils en matière de développement PHP

conseils liés au CSS

Conseils Python

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!