技術標籤：javascriptvue.js元件化components封裝

一、區域性引入

步驟

1、先將元件寫好，放在一個檔案中
元件的寫法和正常的.vue檔案相同，如果需要接收引數，可使用props傳值，以封裝一個標題元件舉例。

以下為專案目錄

以下為元件內容

<template>
  <div class="title-small">
    <ul class="al-cen">
      <li class="icon"></li>
      <li class
 
="text left-10">{{ content }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  props: {
    content: "",//接收引數
  },
  components: {},
  created() {},
  mounted() {},
  methods: {},
};
<
 
/script>
<style lang="scss" scoped>
.title-small {
    background-color: rgb(231, 231, 231);
    padding: 8px 16px;
    width: 500px;
    border-radius: 2px;
  .icon {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    border: 2px solid rgb(19, 180, 230);
  }
  .text {
    font-
 
size: 16px;
  }
}
</style>

2、區域性引入元件並使用
區域性引入可在需要引入的專案中單獨引入

import titleSmall from "./form/titleSmall.vue";
components: {titleSmall},

以下為完整程式碼

<template>
  <div>
  	//直接使用註冊的標籤即可，content內容為傳給元件的值
     <titleSmall class="top-30" content="標題"></titleSmall>
  </div>
</template>

<script>
import titleSmall from "./form/titleSmall.vue";//引入元件
import "../style/form.scss";
export default {
  name: "",
  data() {
    return {
      content: "",
      bat: "",
    };
  },
  components: {titleSmall},//註冊元件
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
</style>

至此元件已區域性引入並正常使用

二、全域性引入

全域性引入方法和區域性引入類似，元件的寫法與區域性引入完全一樣，僅僅是引入方式有所區別
1、寫元件
方法同上
2、引入元件
區域性引入元件是在需要使用元件的檔案中單獨引入，這種方法很常見，在日常使用中大多都是採用區域性引入。
但對於某些使用很頻繁的元件，如標題這樣的可能會所有檔案都會使用的元件，這樣在每個檔案都引入顯得很是繁瑣，且萬一遇到需求改變，修改起來也是異常麻煩，所以全域性引入在此時就顯得很有必要了。
全域性引入的方法也很簡單，僅僅是從單檔案引入改為在main.js檔案中引入即可

import titleSmall from './views/form/titleSmall.vue';//引入元件
Vue.component('title-small',titleSmall)//註冊元件

以下為main.js完整內容

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'
import './style/public.scss';
import './assets/text/text.css';
import titleSmall from './views/form/titleSmall.vue';
Vue.component('title-small',titleSmall)
Vue.prototype.$axios = axios
Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

最終實現效果如下

三、總結

在日常使用中應該儘量避免使用全域性引入，這會大大增加專案體積，在元件複用性不高的情況下，應該使用區域性引入，只有在元件複用性非常高的時候才應該考慮使用全域性引入。