Lihat cara untuk merangkum komponen global pendaftaran automatik dalam Vue

Dalam artikel ini, mari kita lihat cara merangkum komponen global pendaftaran automatik dalam Vue, saya harap ia akan membantu semua orang!

Semasa proses pembangunan projek, kami sering merangkum beberapa komponen global yang biasa digunakan. Walau bagaimanapun, setiap kali anda menambah komponen, anda perlu memperkenalkan pendaftaran secara manual dalam main.js, yang bukan sahaja menyusahkan tetapi juga memerlukan banyak kod, yang benar-benar menjengkelkan. Jadi hanya merangkum komponen global pendaftaran automatik. [Cadangan berkaitan: "Tutorial vue.js"]

1 Sesuaikan folder komponen global

Buat yang baharu di bawah srcglobalComponents, digunakan untuk menyimpan komponen global dan mencipta komponen baharu, seperti Oren; konfigurasi Fail

Buat index.js dalam globalComponents

untuk mencari semua komponen dan mendaftarkannya secara automatik

3. Edit Jingga/ indeks .vue

Perkara yang paling penting tentang komponen ialah nama yang ditakrifkan oleh atribut komponen (nama ialah nama komponen yang didaftarkan secara automatik)

// 自动注册全局组件，每次新增组件必须重新编译
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
})

4 file main.js Import globalComponents/index.js

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

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

Selepas pada asasnya melengkapkan langkah di atas, anda boleh menggunakan komponen global ini secara langsung~

Penggunaan:

// main.js

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

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:
• Pengenalan kepada Pengaturcaraan
! !

Atas ialah kandungan terperinci Lihat cara untuk merangkum komponen global pendaftaran automatik dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!