Erfahren Sie, wie Sie eine globale Komponente zur automatisierten Registrierung in Vue kapseln

In diesem Artikel werfen wir einen Blick darauf, wie man eine globale Komponente zur automatisierten Registrierung in Vue kapselt. Ich hoffe, dass es für alle hilfreich ist!

Während des Projektentwicklungsprozesses kapseln wir häufig einige häufig verwendete globale Komponenten. Allerdings müssen Sie jedes Mal, wenn Sie eine Komponente hinzufügen, die Registrierung in main.js manuell einführen, was nicht nur mühsam ist, sondern auch viel Code erfordert, was wirklich ärgerlich ist. Kapseln Sie einfach eine globale Komponente für die automatisierte Registrierung. [Verwandte Empfehlungen: „vue.js Tutorial“]

1. Passen Sie den globalen Komponentenordner an

Erstellen Sie unter src eine neue globalComponents, um globale Komponenten zu speichern, und erstellen Sie eine neue Komponente, z. B. Orange ；

2. Konfigurationsdatei für die automatische Komponentenregistrierung

Erstellen Sie eine index.js in globalComponents, um alle Komponenten zu finden und automatisch zu registrieren

// 自动注册全局组件，每次新增组件必须重新编译
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. Bearbeiten Sie Orange/index.vue

Am meisten Wichtig an der Komponente ist der durch das Komponentenattribut definierte Name (Name ist der automatisch registrierte Komponentenname)

<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. Importieren Sie globalComponents/index.js in die Eintragsdatei main.js

// main.js

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

• Vervollständigen Sie im Grunde die oben genannten Schritte Schritte Sie sind fertig, Sie können diese globale Komponente direkt verwenden~
• So verwenden Sie:

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

Weitere Programmierkenntnisse finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonErfahren Sie, wie Sie eine globale Komponente zur automatisierten Registrierung in Vue kapseln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!