Vue에서 자동화된 등록 전역 구성 요소를 캡슐화하는 방법을 알아보세요.

이 기사에서는 Vue에서 자동 등록 전역 구성 요소를 캡슐화하는 방법을 살펴보겠습니다. 모든 사람에게 도움이 되기를 바랍니다!

프로젝트 개발 과정에서 일반적으로 사용되는 일부 전역 구성 요소를 캡슐화하는 경우가 많습니다. 하지만 컴포넌트를 추가할 때마다 수동으로 main.js에 등록을 해야 하는데, 이는 번거로울 뿐만 아니라 코드도 많이 필요하기 때문에 정말 짜증납니다. 따라서 자동화된 등록 전역 구성 요소를 간단히 캡슐화하면 됩니다. [관련 권장 사항: "vue.js Tutorial"]

1. 전역 구성 요소 폴더를 사용자 지정합니다

src 아래에 새 globalComponents를 만들어 전역 구성 요소를 저장하고 Orange 와 같은 새 구성 요소를 만듭니다. ;

2. 컴포넌트 자동 등록 구성 파일

globalComponents에서 index.js를 생성하여 모든 컴포넌트를 찾아 자동으로

// 自动注册全局组件，每次新增组件必须重新编译
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. 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/index.js를 항목 파일인 main.js

// main.js

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

로 가져옵니다. 위의 내용을 기본적으로 완료합니다. 단계 완료되었습니다. 이 전역 구성 요소를 직접 사용할 수 있습니다~

• 사용 방법:

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

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 입문

을 방문하세요! !

위 내용은 Vue에서 자동화된 등록 전역 구성 요소를 캡슐화하는 방법을 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!