Compréhension approfondie des trois API du composant vue : prop, slot et event

Peu importe la complexité du composant, il doit être composé d'accessoires, d'événements et de créneaux horaires. L'article suivant vous amènera à comprendre le prop, le slot et l'événement dans le composant vue et à voir comment écrire ces trois API. J'espère que cela vous sera utile !

Présentation de la question

Avez-vous rencontré le scénario suivant : Au cours du développement, vous rencontrez des affichages ou des fonctions particulièrement courantes, et vous souhaitez les extraire et les encapsuler dans un composant indépendant, puis le partager avec d'autres développeurs.

Pour encapsuler un composant, nous comprenons d'abord la composition de base du composant. Quelle que soit la complexité du composant, il doit être composé d'accessoires, d'événements et d'emplacements. Le processus d'écriture des composants est le processus de conception de ces trois API. De même, si vous souhaitez lire des composants écrits par d'autres, vous pouvez également les comprendre rapidement grâce à ces trois API. [Recommandation associée : "tutoriel vue.js"]

Alors, comment devrions-nous écrire ces trois API : prop, event et slot ?

Attribute prop

prop est utilisé pour définir les attributs que le composant peut accepter.

En lisant le site officiel de vue, nous savons que prop peut être écrit sous forme de tableau ou d'objet. Pour plus de commodité, de nombreuses personnes utilisent directement la méthode d'écriture de tableau prop, qui n'est pas rigoureuse lors de l'écriture de composants généraux, nous devons utiliser autant que possible la méthode d'écriture d'objet prop.

Vous pouvez regarder le code suivant :

app.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default() {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator(value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    // 具有默认值的函数
    propG: {
      type: Function,
      // 与对象或数组默认值不同，这不是一个工厂函数 —— 这是一个用作默认值的函数
      default() {
        return 'Default function'
      }
    }
  }
})

Je crois que tout le monde peut voir que prop est écrit à l'aide d'objets. Nous pouvons vérifier si les attributs entrants sont corrects et donner des invites à temps, ce qui est particulièrement utile lorsque nous écrivons des composants indépendants.

Étant donné que vue doit suivre le principe du flux de données unidirectionnel, nous ne devons pas essayer de modifier la valeur de la prop et devons utiliser d'autres solutions.

Solutions courantes pour modifier les valeurs des accessoires

1. Prop transmet la valeur initiale et l'attribue aux données

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

2 Recevez les valeurs des accessoires en calculant les attributs

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

Slots

Les emplacements sont utilisés pour distribuer le contenu de. composants, tels que

<todo-button>
  Add todo
</todo-button>

<!-- todo-button 组件模板 -->
<button class="btn-primary">
  <slot></slot>
</button>

Lors du rendu, il sera remplacé par Ajouter une tâche, tel que

<!-- 渲染 HTML -->
<button class="btn-primary">
  Add todo
</button>

Il s'agit de l'utilisation la plus basique de slot. Il est dérivé des slots nommés, comme son nom l'indique, il s'agit de distinguer les slots. Plusieurs emplacements peuvent être définis, par exemple,

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

rencontre parfois des informations de sauvegarde pour l'emplacement, vous pouvez alors l'utiliser comme ceci :

<button type="submit">
  <slot>Submit</slot>
</button>

Les informations de sauvegarde de l'emplacement sont Soumettre

événement

Nom de l'événement

Lorsque les données du sous-composant sont modifiées, lorsque vous souhaitez notifier le composant parent, vous pouvez utiliser l'événement event, comme suit :

// 子组件
this.$emit('myEvent')

// 父组件
<my-component @my-event="doSomething"></my-component>

On voit que lorsque le composant enfant appelle, le nom de l'événement est camel case, tandis que le nom d'événement du composant parent est kebab-case dénomination.

Événements personnalisés

Vous pouvez personnaliser les événements via l'option d'émission, telle que

app.component('custom-form', {
  emits: ['inFocus', 'submit']
})

Il convient de noter que si l'événement personnalisé est le même que l'événement natif, tel que click, alors l'événement personnalisé remplacera le événement natif

Organisation du composant

Présentation d'une image du site officiel

Une page est équivalente à un arbre composé de composants. Chaque composant peut avoir des composants parents et des sous-composants L'attribut prop autorise le composant parent. pour transmettre des propriétés aux sous-composants, le composant enfant peut transmettre des informations au composant parent via des événements, et l'emplacement est utilisé par le composant parent pour distribuer du contenu.

Résumé

En plus de ces trois API, les composants ont également d'autres contenus, tels que le cycle de vie, les mix-ins, les propriétés calculées, etc., mais pour le développement de composants, ces trois API suffisent. Après avoir maîtrisé ces trois API, il ne reste plus qu'à découpler la logique d'interaction des composants, essayer de répartir différentes fonctions sur différents sous-composants, puis construire une arborescence de composants.

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

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!