Dans l'applet de développement Uniapp, comment écrire des composants personnalisés et implémenter le transfert de valeur

Lorsque nous développons des projets universitaires, nous rencontrons souvent la nécessité d'utiliser certains modules courants, tels qu'une fenêtre contextuelle et un ensemble de boutons. S'ils sont écrits à plusieurs reprises pour chaque page, cela prendra beaucoup de temps et n'est pas bon. pour la maintenance et la gestion du système, il nous est donc nécessaire de l'écrire comme un module général pour atteindre l'objectif d'appel arbitraire.

Tous les composants seront définis dans le répertoire des composants. Si vous n'avez pas ce répertoire dans votre nouveau projet, vous pouvez également le créer vous-même. Ce qui suit est une structure de composant définie (shopwind-multpicker) :

components/
  shopwind-multpicker/
  shopwind-multpicker.js
shopwind-multpicker.vue
pages/
static/
App.vue

Chaque composant est. Un dossier, après avoir défini le composant, on peut l'appeler dans la vue (vue). L'exemple de code est le suivant :

<shopwind-multpicker :title="title" idField="region_id" nameField="region_name" parentField="parent_id" :selected="selected" @confirm="confirm"></shopwind-multpicker>

Ceci termine l'affichage d'un composant, alors comment passer la valeur du composant au parent page ? En utilisant la méthode this.$emit dans le fichier du composant (shopwind-multpicker.vue) :

// 组件的vue文件
this.$emit('confirm', '返回父页面的结果集')

Ensuite, dans la page parent, vous devez définir une méthode du même nom que le premier paramètre d'emit (ici : confirmer ) pour recevoir le mot Le résultat de retour du composant, cette méthode est définie dans les méthodes

// 父页面的vue文件
export default {
  data() {
    return {}
  },
  methods: {
    confirm(result) {
      // 这里可以获取您选择后返回的数据
      console.log(result)
    }
  }
}

Ceci termine le transfert de valeur d'une page parent-enfant. Dans cet exemple, le composant shopwind-multpicker est utilisé, qui est un plug-. en ce sens qu'il prend en charge la liaison à trois niveaux, telle que la liaison de classification, peut prendre en charge la liaison à trois niveaux de n'importe quel modèle. Le plug-in a été publié sur le marché des plug-ins Dcloud. Si nécessaire, vous pouvez le télécharger et l'utiliser. gratuit sur le marché des plug-ins : Package universel de liaison à trois niveaux, qui peut prendre en charge n'importe quel modèle (tel que la liaison régionale, la liaison de classification) - Marché des plug-ins DCloud

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!