Découvrez comment encapsuler un composant global d'enregistrement automatisé dans Vue

Dans cet article, voyons comment encapsuler un composant global d'enregistrement automatisé dans Vue. J'espère que cela sera utile à tout le monde !

Pendant le processus de développement du projet, nous encapsulons souvent certains composants globaux couramment utilisés. Cependant, chaque fois que vous ajoutez un composant, vous devez introduire manuellement l'enregistrement dans main.js, ce qui est non seulement gênant mais nécessite également beaucoup de code, ce qui est vraiment ennuyeux. Il suffit donc d’encapsuler un composant global d’enregistrement automatisé. [Recommandations associées : "tutoriel vue.js"]

1. Personnalisez le dossier des composants globaux

Créez un nouveau globalComponents sous src pour stocker les composants globaux et créez un nouveau composant, tel que Orange ；

2. Fichier de configuration de l'enregistrement automatique des composants

Créez un index.js dans globalComponents pour trouver tous les composants et enregistrer automatiquement

// 自动注册全局组件，每次新增组件必须重新编译
import Vue from 'vue'

const requireComponent = require.context(
  '../globalComponents', // 其组件目录的相对路径
  true, // 是否查询其子目录
  /\.vue$/ // 匹配基础组件文件名的正则表达式
)
requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName); // 获取组件配置
  /**
   * 兼容 import export 和 require module.export 两种规范
   */
  // 如果这个组件选项是通过 export default 导出的,就会优先使用 .default
  const comp = componentConfig.default || componentConfig; 
  Vue.component(comp.name, comp) // 此处的name是组件属性定义的name
})

3 Edit Orange/index.vue

Le plus. La chose importante à propos du composant est le nom défini par l'attribut du composant (le nom est le nom du composant automatiquement enregistré)

<template>
  <div class="wrapper">
    Orange
  </div>
</template>

<script>
export default {
  name: &#39;Orange&#39;, // 此处的name属性值将为后面使用的组件名 <orange />，需唯一
  components: {},
  props: {},
  data() {
    return {}
  },
  created() {},
  mounted() {},
  methods: {}
}
</script>

4 Importez globalComponents/index.js dans le fichier d'entrée main.js

// main.js

import Vue from 'vue'
// 自动注册全局组件
import './globalComponents/index.js'

• Complétez essentiellement ce qui précède. étapes Vous avez terminé, vous pouvez utiliser ce composant global directement~
• Comment utiliser :

<template>
  <div class="wrapper">
    <!-- 自动注册的全局组件 -->
    <orange />
  </div>
</template>

Pour plus de connaissances liées à 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!