Vue加载组件、动态加载组件的几种方式

当使用Vue框架进行开发时，可能会遇到需要动态加载组件的情况。Vue框架提供了一些方式来满足这种需求。

加载组件的几种方式

1. 直接注册组件

Vue框架提供了全局注册和局部注册两种方式。

1.1 全局注册方式

在全局注册中，通过 Vue.component() 方法注册组件。这种方式适用于组件会在项目的不同位置多次使用。

// 定义组件: todo-list.vue
<template>
  <ul>
    <li v-for="(todo, index) in todos" :key="index">
      {{ todo }}
    </li>
  </ul>
</template>

<script>
  export default {
    // 接收父组件传递的属性值
    props: ['todos']
  }
</script>

// 在应用中进行全局注册
import Vue from 'vue'
import TodoList from './components/todo-list.vue'

Vue.component('todo-list', TodoList)

全局注册后，在任何组件的 template 标签中都可以直接通过 "" 标签使用该组件。

1.2 局部注册方式

如果组件仅在某个组件内使用，那么可以使用局部注册的方式，不需要进行全局注册。

// 定义组件: todo-list.vue
<template>
  <ul>
    <li v-for="(todo, index) in todos" :key="index">
      {{ todo }}
    </li>
  </ul>
</template>

<script>
  export default {
    // 接收父组件传递的属性值
    props: ['todos']
  }
</script>

// 在应用中进行局部注册
import TodoList from './components/todo-list.vue'

export default {
  components: {
    'todo-list': TodoList
  }
}

2. 动态加载组件

有时候我们需要根据运行时的条件来动态加载组件。可以通过 Vue 的异步组件和Webpack的代码分割功能来实现动态加载。

2.1 异步组件

Vue框架支持使用 import() 函数来异步加载组件。

例如，有一个App.vue组件，在该组件需要动态引入Child1.vue和Child2.vue两个子组件。

<template>
    <div>
        <component :is="currentComp" />
        <button @click="changeChild">Click to change child component</button>
    </div>
</template>

<script>
import Child1 from './components/Child1.vue'
import Child2 from './components/Child2.vue'

export default {
    components: {
        Child1,
    },
    data () {
        return {
            currentComp: 'Child1'
        }
    },
    methods: {
        changeChild() {
            this.currentComp = this.currentComp === 'Child1' ? 'Child2' : 'Child1'
        }
    }
}
</script>

这里的 component 标签是用来加载动态组件的，另外在 data 中定义了一个 currentComp 变量，用来控制当前加载组件的值。

在Webpack编译时，将会把Child1.vue 和 Child2.vue 编译成单独的JS文件。 在实际需要使用时，可以通过 import() 方法异步加载文件。

<template>
    <div>
        <component :is="currentComp" />
        <button @click="changeChild">Click to change child component</button>
    </div>
</template>

<script>
export default {
    data () {
        return {
            currentComp: 'Child1'
        }
    },
    methods: {
        changeChild () {
            if (this.currentComp === 'Child1') {
                import('./components/Child2.vue').then(child => {
                    this.currentComp = child.default
                })
            } else {
                import('./components/Child1.vue').then(child => {
                    this.currentComp = child.default
                })
            }
        }
    }
}
</script>

这里通过 import() 方法异步加载 Child1.vue 和 Child2.vue 组件，并根据当前的 currentComp 值来进行切换。

3. Vue内置异步组件

Vue框架提供了一种更简单的方式来实现异步组件，就是使用 <async-component> 标签，该标签会自动进行异步加载。

首先，需要安装 vue-async-component 插件。

npm install vue-async-component

安装后，在项目中就可以使用 <async-component> 标签进行动态加载组件。

例如，有一个App.vue组件，在该组件需要动态引入Child1.vue和Child2.vue两个子组件。

<template>
    <div>
        <async-component :name="currentComp" :load="loadComp"/>
        <button @click="changeChild">Click to change child component</button>
    </div>
</template>

<script>
import Child1 from './components/Child1.vue'
import Child2 from './components/Child2.vue'
import VueAsyncComponent from 'vue-async-component'

export default {
    components: {
        Child1,
        Child2,
        asyncComponent: VueAsyncComponent
    },
    data () {
        return {
            currentComp: 'Child1'
        }
    },
    methods: {
        loadComp (name, cb) {
            if (name === 'Child1') {
                cb(Child1)
            } else {
                cb(Child2)
            }
        },
        changeChild () {
            this.currentComp = this.currentComp === 'Child1' ? 'Child2' : 'Child1'
        }
    }
}
</script>

这里动态加载时使用了 VueAsyncComponent 插件，<async-component> 标签就是该插件提供的。在组件加载时，会根据名称触发 loadComp 方法，实现异步加载。在这个示例中，将加载 Child1.vue 和 Child2.vue 组件，并根据当前的 currentComp 值来进行切换。