技術標籤：vuejs

一、通過install 封裝
1、建立元件資料夾包含 .vue檔案和對應的.js檔案
如圖：

2、完成元件模板

<!-- 這是一個公共元件 -->
<template>
  <div>這是一個公共元件內容</div>
</template>

<script>
export default {
  name:"List",
  data () {
    return {
    };
  },

  methods: {}
}

</script>
<style lang='scss' scoped>
</style>
 

3、在相應的js內註冊元件
/-----list.js檔案-----/

import myList from "./List.vue" 
const List = {
  install :function (Vue) {
    Vue.component("list",myList)  //list為使用元件的名字
  }
}
export default List

匯入模板List.vue ，通過install方式註冊元件，元件需先註冊在使用。使用install方法 即可通過在main.js 中 vue.use()使用。
4、在專案中引用
/-----main.js--------/

5、使用元件

<template>
  <div id="body">
    <list></list>
  </div>
</template>

二、直接全域性封裝
1、直接新建.vue 模板

<!-- 這是一個公共元件 -->
<template>
  <div>這是一個公共元件內容</div>
</template>

<script>
export default {
  name:"List",
  data () {
    return {
    };
  },

  methods: {}
}

</script>
<style lang='scss' scoped>
</style>
 

2、在main.js 引入

//公共元件
import List from "./components/list/List.vue"
Vue.component("List",List)

3、使用

<template>
  <div id="body">
    <list></list>
  </div>
</template>