Tutoriel d'introduction au développement VUE3 : Utilisez le plug-in Vue.js pour encapsuler le composant du champ de recherche

Vue.js est un framework JavaScript populaire et VUE3 est sa dernière version, qui offre une vitesse plus rapide et des fonctionnalités plus puissantes. Dans cet article, je vais vous montrer comment encapsuler un simple composant de champ de recherche à l'aide des plug-ins VUE3 et Vue.js.

1. Créer un projet Vue

Tout d'abord, vous devez installer VUE3 et Vue-cli. Après avoir installé Vue-cli, vous pouvez saisir la commande suivante pour créer un nouveau projet vue :

vue create search-box

Suivez ensuite les invites pour l'installer.

2. Créer un nouveau plugin

Dans le dossier du projet, vous devez créer un nouveau plugin. Dans le dossier src, créez un fichier appelé search-box.js. Dans ce fichier, vous définirez le composant du champ de recherche et le plug-in.

Dans search-box.js, nous devons d'abord importer Vue :

import Vue from 'vue'

Ensuite, nous pouvons définir un nouveau composant Vue appelé SearchBox :

const SearchBox = Vue.component('SearchBox', {
  template: `
    <div>
      <input type="text" v-model="searchTerm" ref="searchInput" @keyup.enter="performSearch" placeholder="Search...">
      <button @click="performSearch">Search</button>
    </div>
  `,
  data() {
    return {
      searchTerm: ''
    }
  },
  methods: {
    performSearch() {
      this.$emit('search', this.searchTerm)
      this.$refs.searchInput.focus()
      this.searchTerm = ''
    }
  }
})

Dans le code ci-dessus, nous avons défini un simple composant Box de recherche. Le composant dispose d'une zone de saisie, d'un bouton et d'une fonction qui peut gérer la recherche. Si l'utilisateur clique sur le bouton de recherche ou appuie sur la touche Entrée, la valeur searchTerm sera envoyée au composant parent via l'événement d'émission.

3. Installez le plugin

Nous devons utiliser le plugin Vue pour convertir search-box.js en un plugin Vue utilisable. À la fin du fichier search-box.js, ajoutez le code suivant :

export default {
  install(Vue) {
    Vue.component('SearchBox', SearchBox)
  }
}

De cette façon, nous avons créé un plugin Vue.js fonctionnel. Nous pouvons utiliser ce plugin dans les projets Vue.

4. Utilisation de plugins

Maintenant, nous devons utiliser le plugin de champ de recherche dans notre projet Vue. Pour ce faire, importez le plugin search-box.js dans le fichier main.js de votre projet et installez le plugin en utilisant la méthode Vue.use :

import Vue from 'vue'
import SearchBox from './search-box'

Vue.use(SearchBox)

Nous avons maintenant le plugin search-box installé. Il peut être utilisé dans les projets Vue.

5. Utilisation de SearchBox dans les composants

Dans le projet Vue, nous pouvons utiliser le composant de zone de recherche. Par exemple, dans un composant nommé App.vue, nous pouvons ajouter un composant nommé search :

<template>
  <div>
    <SearchBox @search="doSearch"></SearchBox>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    doSearch(searchTerm) {
      alert(searchTerm)
    }
  }
}
</script>

Dans le code ci-dessus, nous avons ajouté un composant nommé search et y avons ajouté un composant nommé doSearch. La méthode est appelée lorsque l'utilisateur effectue une recherche et affiche une boîte d'alerte contenant le terme de recherche.

6. Exécutez le projet Vue

Enfin, il nous suffit d'exécuter le projet Vue. Dans le terminal de ligne de commande, entrez la commande suivante :

npm run serve

Cela démarrera le projet Vue. Ouvrez http://localhost:8080 dans votre navigateur pour afficher le composant du champ de recherche.

Conclusion

Dans ce tutoriel, nous avons appris à encapsuler un simple composant de champ de recherche à l'aide du plugin Vue.js. Nous avons appris à utiliser ce composant dans les projets VUE3 et avons constaté que VUE3 était plus rapide, plus puissant et plus facile à utiliser. Vous pouvez désormais utiliser ces connaissances pour créer votre propre application Vue.js.

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!