11.封装vue组件

封装vue组件

1. 首先创建一个自定义组件的文件夹custom(名字自取),里面包含一个index.js文件，用于向外抛出其里面的组件,目录结构如下所示：

2. 然后在该文件夹下创建包含组件并在里面创建一个index.js文件，用于向外抛出该组件，组件需要添加name属性，这样外界就可以根据name属性调用该组件，文件夹的目录如下：

    custom{
        map{
          map.vue
          index.js
        }
        index.js
    }
   

3. 编辑map文件夹下的index.js文件

   import Mmap from './map.vue'
   
   //Mmap.install供我们开发新的插件及全局注册组件等
   Mmap.install=function(Vue){
      Vue.component(Mmap.name,Mmap)
   }
   export default Mmap
   
   

4. 编辑custom文件夹下的index.js文件，该文件用于向外抛出其里面的组件

   import Mmap from './map/index.js'
   const components=[ Mmap] 
   
   
   const install=function(Vue){
       // 遍历并注册组件
           components.forEach(component => {
               Vue.component(component.name,component)
           });
   }
   if(typeof window !=='undefined' && window.Vue){
       install(window.Vue)
   }
   export default{
       install,
       ...components
   }
   

5. 在main.js文件中全局引入并使用自定义的组件，这样在其他地方就可以使用该组件了

import customIndex from './custom/index.js'
import Vue from 'vue'

//使用use加载插件
Vue.use(customIndex)

6. 使用封装好的组件

     <tz-map :markers1="markers" @mapclick="showData" :num="numData"> 
        </tz-map>