Comment créer un composant global personnalisé à l'aide de Vue

J'ai appris Vue.js au cours des deux derniers jours et je pense qu'il y a beaucoup de connaissances sur les composants et qu'ils sont très importants, donc cet article vous présente principalement la méthode d'implémentation des composants globaux personnalisés dans Vue. Il est introduit via un exemple de code. Il est très détaillé et a une certaine valeur d'apprentissage de référence pour que tout le monde puisse apprendre ou utiliser vue. Les amis qui en ont besoin peuvent suivre l'éditeur pour apprendre ensemble.

Préface

Parfois, lorsque nous faisons du développement, nous voulons écrire un plug-in puis utiliser notre propre plug-in, qui en quelque sorte Il y a un fort sentiment d’accomplissement. Aujourd'hui, j'ai résolu un problème qui me dérangeait depuis longtemps. Je vais l'enregistrer maintenant pour référence future.

Le point de connaissance impliqué est l'utilisation de plug-ins dans le tutoriel du site officiel de Vue.js

La méthode est la suivante :

Tout d'abord, j'ai rencontré le problème est que si mon composant personnalisé doit être appelé plusieurs fois dans d'autres composants du projet, ma solution précédente consiste simplement à le référencer là où cela est nécessaire. Cela ajoute sans aucun doute beaucoup de duplication de code.

Lors de l'utilisation de certains frameworks d'interface utilisateur de Vue.js, j'ai remarqué qu'il suffit d'importer le plug-in dans le fichier d'entrée du projet, puis de suivre Vue.use('nom du plugin'). De cette manière, les composants et méthodes de ce cadre peuvent être utilisés tout au long du projet.

Après avoir consulté les informations, j'ai trouvé que le composant personnalisé doit fournir une méthode d'installation

import sideblockComponent from './sideBlock'
const defaultComponentName = 'sidebar'

const Sidebar = {
 install(Vue, options = {}) {
 const componentName = options.componentName || defaultComponentName //提供可选的组件名
 Vue.component(componentName, sideblockComponent)
 }
}
export default Sidebar

Introduisez le composant que vous avez écrit comme ceci, puis créez un objet et incluez une méthode d'installation, et Utilisez la méthode Vue.component() pour vous inscrire en tant que composant global Vue, et enfin export default pour exporter cet objet.

Maintenant que l'étape la plus critique est terminée, l'étape suivante est l'étape la plus critique.

Nous devons introduire le composant qui vient d'être créé dans le fichier d'entrée du projet, et utiliser le plug-in via Vue.use (composant introduit).

À ce stade, un composant Vue global est prêt. Bien que nous fournissions la méthode d'installation, nous pouvons également déclencher les méthodes dans le composant via la méthode Vue.$emit(). Cependant, récemment, lors de l'utilisation d'Element UI, nous avons constaté que les méthodes de leurs composants sont généralement déclenchées via Vue.$refs(). Les raisons spécifiques seront laissées pour des recherches futures.

Utilisation de base de vue $refs

<p id="app">
<input type="text" ref="input1"/>
<button @click="add">添加</button>
</p>

<script>
new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗
    }
  }
})
</script>

De manière générale, pour obtenir des éléments DOM, document.querySelector(" . input1") pour obtenir ce nœud dom, puis obtenir la valeur de input1.

Mais après la liaison avec ref, nous n'avons plus besoin d'obtenir le nœud dom. Nous pouvons directement lier input1 à l'entrée ci-dessus, puis l'appeler dans $refs.

Ensuite, appelez-le comme ceci en javascript : this.$refs.input1 Cela peut réduire la consommation d'obtention de nœuds dom

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile. à tout le monde à l'avenir.

Articles connexes :

Utiliser axios pour télécharger des fichiers dans vue

Comment utiliser gulp pour créer un processus de projet complet

Comment ajouter un tableau à un objet en 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!