【Vue.js】之动态组件与异步组件

1.动态组件

• :is = “component-name” 用法
• 需要根据数据，动态渲染的场景。即组件类型不确定
  

代码实例

<template>
  <div>
      <p>vue高级特性</p>
      <hr>
      <!-- 动态组件 -->
      <component :is="NextTickName"></component>
  </div>
</template>

<script>
import NextTick from './nextTick'
export default {
  components: {
    NextTick
  },
  data () {
    return {
      name: '夹心',
      website: {
        url: 'http://imooc.com/',
        title: 'imooc',
        subTitle: '程序员的梦工厂'
      },
      NextTickName: 'NextTick'
    }
  }
}
</script>

<style>

</style>

模拟新闻页面详情

<template>
   <div>
      <!-- 动态组件 -->
      <component :is="NextTickName"></component>
      <div v-for="item in newsData" :key="item.id">
        <component :is="item.type"></component>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      newsData: [
        {
          id: 1,
          type: 'text'
        },
        {
          id: 2,
          type: 'text'
        },
        {
          id: 3,
          type: 'image'
        }
      ]
    }
  }
}
</script>

2.异步组件

• import() 函数
• 按需加载，异步加载大组件

export default {
  components: {
    FormDemo: () => import('../components/FormDemo')
  }
}