vue 封装组件

一、通过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--------/
import List from “./components/list/list.js”
Vue.use(List)

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>