Vue动态组件Component详解

一、加载el

在Vue中，动态组件指的是通过Component组件在运行时才确定具体的组件类型的组件。Vue中的Component组件可以用来动态切换组件。当需要延迟加载一个组件的时候，通过动态组件可以完成。

Vue的Component组件提供了一个is属性，可以在运行时控制组件的挂载位置。我们可以为is属性指定一个组件的名称或是一个组件对象，这个组件对象可以是通过Vue.component()或是Vue.extend()方法定义的组件对象。is属性还可以通过一个变量指定，这个变量的值可以通过事件或是状态维护的。

示例代码：

  
    
   

      change
      
    
   
  

  
    new Vue({
      el: '#app',
      data: {
        componentName: 'component-a'
      },
      components: {
        'component-a': {
          template: '
   
Component A
   
'
        },
        'component-b': {
          template: '
   
Component B
   
'
        }
      },
      methods: {
        changeComponent () {
          this.componentName = this.componentName === 'component-a' ? 'component-b' : 'component-a'
        }
      }
    })
  

二、Vue动态组件传递参数

Vue中，通过props属性可以向子组件传递数据。当使用动态组件时，可以向动态组件传递props。这里需要注意，动态组件的props属性，需要在运行时通过对象的方式进行指定。

示例代码：

  
    
   

      change
      
    
   
  

  
    new Vue({
      el: '#app',
      data: {
        componentName: 'component-a',
        message: 'Hello Vue!'
      },
      components: {
        'component-a': {
          template: '
   
{{ message }}
   
',
          props: ['message']
        },
        'component-b': {
          template: '
   
{{ message.split("").reverse().join("") }}
   
',
          props: ['message']
        }
      },
      methods: {
        changeComponent () {
          this.componentName = this.componentName === 'component-a' ? 'component-b' : 'component-a'
        }
      }
    })
  

三、Vue动态import组件

Vue提供了异步组件加载的方式，通过异步加载组件，可以在需要时才加载组件，提升应用运行效率。Vue中，异步组件可以通过Vue.component()方法进行定义，也可以通过import函数动态引入组件。

示例代码：

  
    
   

      change
      
    
   
  

  
    new Vue({
      el: '#app',
      data: {
        componentName: null
      },
      components: {
        'component-a': () => import('./components/ComponentA.vue'),
        'component-b': () => import('./components/ComponentB.vue')
      },
      methods: {
        changeComponent () {
          this.componentName =
            this.componentName === 'component-a' ? 'component-b' : 'component-a'
        }
      }
    })
  

四、Vue动态引入组件

在Vue中，不仅可以通过import函数进行异步组件的引入，也可以通过函数动态生成组件对象。这个动态生成的组件对象可以在模板或是组件渲染函数中使用。

示例代码：

  
    
   

      change
      
    
   
  

  
    new Vue({
      el: '#app',
      data: {
        componentName: 'component-a'
      },
      methods: {
        changeComponent () {
          this.componentName = this.componentName === 'component-a' ? 'component-b' : 'component-a'
        }
      },
      components: {
        'component-a': {
          template: '
   
Component A
   
'
        }
      }
    })

    const createComponentB = () => {
      return {
        template: '
   
Component B
   
'
      }
    }

    setTimeout(() => {
      Vue.component('component-b', createComponentB())
    }, 2000)
  

五、Vue动态加载组件

Vue还提供了通过判断条件动态加载组件的方式，在运行时判断是否需要加载组件，从而提升应用的消耗。

示例代码：

  
    
   

      toggle
      
    

        
      
    
    
   
  

  
    new Vue({
      el: '#app',
      data: {
        showComponent: false
      },
      components: {
        'component-a': () => import('./components/ComponentA.vue')
      },
      methods: {
        toggleComponent () {
          this.showComponent = !this.showComponent
        }
      }
    })