0
点赞
收藏
分享

微信扫一扫

Vue高级特性「七」--动态组件\异步组件***

未定义变量 2021-09-30 阅读 84
web 前端

使用场景:
需要根据数据(新闻详情页),动态渲染的场景,即组件类型不确定。

动态组件基本使用

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

import nextTick from './nextTick'
export default {
  components:{
    nextTick,
  },
  data() {
    return {
      nextTickName:"nextTick"
    };
  },
  
};

用动态组件实现切换

<div id="example">
  <button @click="change">切换页面</button>
  <component :is="currentView"></component>
</div>

new Vue({
  el: '#example',
  data:{
    index:0,
    arr:[
      {template:`<div>我是页面A</div>`},
      {template:`<div>我是页面B</div>`},
      {template:`<div>我是页面C</div>`}
    ],
  },
  computed:{
    currentView(){
        return this.arr[this.index];
    }
  },
  methods:{
    change(){
      this.index = (++this.index)%3;
    }
  }
})

什么是异步组件?

Vue实现按需加载

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

注册方式:

components:{
  FromDemo:()=>import('../FromDemo')
}

组件调用方式:

<FromDemo v-if="show"/>
<button @click="show=true"></button>
举报

相关推荐

0 条评论