首頁  >  文章  >  web前端  >  看看Vue中如何封裝一個自動化註冊全域元件

看看Vue中如何封裝一個自動化註冊全域元件

青灯夜游
青灯夜游轉載
2021-11-18 19:37:002131瀏覽

這篇文章一起來看看Vue中如何封裝一個自動化註冊全域元件,希望對大家有幫助!

看看Vue中如何封裝一個自動化註冊全域元件

在專案的開發過程中,我們常常會去封裝一些比較常用的全域元件, 但每增加一個元件就需要手動在main.js引入註冊,不僅麻煩還程式碼量多,著實讓人心煩。 所以乾脆封裝一個自動化註冊全域元件。 【相關推薦:《vue.js教學》】

1、自訂全域元件資料夾

在src下新建一個globalComponents,用於存放全域元件,並新建一個元件,例如Orange

看看Vue中如何封裝一個自動化註冊全域元件

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

元件最重要的是元件屬性定義的name(name為自動註冊的元件名稱)

<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、入口檔案main.js中導入globalComponents/ index.js

// main.js

import Vue from &#39;vue&#39;
// 自动注册全局组件
import &#39;./globalComponents/index.js&#39;
  • 基本上完成以上幾步就大功告成了,後面就是可以直接使用這個全域元件了~
  • 使用方法:
<template>
  <div class="wrapper">
    <!-- 自动注册的全局组件 -->
    <orange />
  </div>
</template>

更多程式相關知識,請造訪:程式設計入門! !

以上是看看Vue中如何封裝一個自動化註冊全域元件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:juejin.cn。如有侵權,請聯絡admin@php.cn刪除