Vue组件

命名：
  短横线：<my-component-name>
  驼峰式：<MyComponentName>

Vue.component('my-component-name', { /* ... */ })
Vue.component('MyComponentName', { /* ... */ })

注册：

1. 全局注册

方式：
  方式一：App.vue或main.js里面直接引入
  方式二：新建一个文件夹统一放置全局组件，写一个js处理，再在main.js引入

方式一

// App.vue
<script>
  import IconFont from './components/IconFont'
  export default {
    name: 'App',
    components:{
      IconFont
    }
  }
</script>


// main.js
import IconFont from './components/IconFont'
Vue.component(IconFont)


// 新建一个globalComponen.js文件
// 将所用到的全局组件在里面引入，在main.js文件内引入此js
// globalComponent.js 
import IconFont from './IconFont.vue'
export default (Vue)=>{
  Vue.component("IconFont",IconFont)
}
// 在main.js文件里面引入globalComponent.js文件
import globalComponent from './components/globalComponent.js';
Vue.use(globalComponent);

方式二
  如图新建文件夹

image.png

// globalComponent.js 文件

import Vue from 'vue'
// 组件名字处理会用到lodash
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
/**
 * 基础组件相对于当前文件的相对位置
 * 是否查询子目录
 * 匹配基础组件名字的正则，这里均是base开头
 */
const requireComponent = require.context(
  './base',
  false,
  /base[A-Z]\w+\.(vue|js)$/
)
/**
 * componentConfig      获取组件配置
 * componentName        获取组件的PascalCase命名
 * camelCase            剥去文件名开头'./'和结尾的扩展名
 * Vue.component        全局注册组件
 */
requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)
  const componentName = upperFirst(
    camelCase(
      fileName.replace(/^\.\/_/, '').replace(/\.\w+$/, '')
    )
  )
  Vue.component(componentName, componentConfig.default || componentConfig)
})



// main.js引入globalComponent.js文件
import '@/components/globalComponent.js'   

2. 局部注册

在要引入的组件内引入

<script>
import IconFont from './components/IconFont'
   export default {
    name: 'App',
    components:{
      IconFont
    }
}
</script>

动态组件&异步组件

is：切换不同的组件
keep-alive：失活的组件将会被缓存（切换组件时，保持这些组件的状态，避免重复渲染时使用）

<component :is="currentTabComponent"></component>

<keep-alive>
  <component :is="currentTabComponent"></component>
</keep-alive>

异步组件：
    在需要的时候从服务器加载一个模块
    为了简化，vue允许以工厂函数的方式定义组件，用于异步解析组件定义
    只有组件被渲染的时候才触发该工厂函数，且会把结果缓存起来供未来重新渲染

// 全局注册
Vue.component(
  'async-webpack-example',
  ()=>import('./my-async-component')
)

// 局部注册
new Vue({
  components:{
    'my-component':()=>import('./my-async-component')
  }
})

// 处理加载状态
const AsyncComponent = () => ({
  component:import('./MyComponent.vue'),      //  需要加载的组件
  loading:LoadingComponent,                   //  异步组件加载时使用的组件
  error:ErrorComponent,                       //  加载失败时使用的组件
  delay:200,                                  //  加载时组件的延时时间
  timeout:3000
})