Vue で自動登録グローバル コンポーネントをカプセル化する方法をご覧ください。

この記事では、Vue で自動登録グローバル コンポーネントをカプセル化する方法を見てみましょう。皆様のお役に立てれば幸いです。

プロジェクト開発プロセスでは、一般的に使用されるいくつかのグローバル コンポーネントをカプセル化することがよくあります。 しかし、コンポーネントを追加するたびにmain.jsへの登録を手動で導入する必要があり、面倒なだけでなくコード量も多く、非常に面倒です。 したがって、自動登録グローバル コンポーネントを単純にカプセル化します。 [関連する推奨事項: "vue.js チュートリアル "]

1. グローバル コンポーネント フォルダーをカスタマイズする

src の下に新しいフォルダーを作成しますglobalComponents、グローバル コンポーネントを保存し、Orange;

2 などの新しいコンポーネントを作成するために使用されます。設定ファイル

すべてのコンポーネントを検索し、自動的に

// 自动注册全局组件，每次新增组件必须重新编译
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 を登録するために、

globalComponents にindex.js を作成します。Orange/index.vue# を編集します。

##コンポーネントについて最も重要なことは、コンポーネント属性によって定義された名前です (名前は自動的に登録されたコンポーネント名です)

<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. globalComponents/ をエントリにインポートしますfile main.js index.js

// main.js

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

基本的に上記の手順を完了すると、このグローバル コンポーネントを直接使用できるようになります~
使用方法:

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

プログラミング関連の知識については、

プログラミング入門をご覧ください。 ！

以上がVue で自動登録グローバル コンポーネントをカプセル化する方法をご覧ください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。