码迷,mamicode.com
首页 > 其他好文 > 详细

vue动态组件

时间:2021-02-20 12:15:23      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:temp   name   nts   rip   from   imp   check   data   初始   

如果我们不想让也面初始化的时候就加载所有的组件,就会用到动态组件
常用的场景是多tab的页面,每一个tab是一个组件这种

  • 示例1:这是没有使用动态组件的时候
<template>
  <div>
    <button @click="check">{{ !show ? "展示组件" : "隐藏组件" }}</button>
    <ccc v-if="show"></ccc>
  </div>
</template>

<script>
import ccc from ‘../components/ccc‘
export default {
  components: { ccc },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    check() {
      this.show = !this.show;
    },
  },
};
</script>
···
打开控制台,切换到到network面板,刷新页面,会看到页面初始化的时候就已经加载了这个也买你所有的组件(只有一个app.js),点击展示组件按钮的时候,是不会再请求资源的



- 示例2:这是使用了动态组件的时候
```js
<template>
  <div>
    <button @click="check">{{ !show ? "展示组件" : "隐藏组件" }}</button>
    <ccc v-if="show"></ccc>
  </div>
</template>

<script>

export default {
  components: { 
    ccc: () => { import("../components/ccc") }
  },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    check() {
      this.show = !this.show;
    },
  },
};
</script>

打开控制台,切换到到network面板点击展示组件按钮的时候,会看到请求了xx.js资源,我们可以给这个xx命名,方式是:ccc: () => { import(/* webpackChunkName: ‘ccc‘ */ "../components/ccc") }
这样xx.js就变成了ccc.js

vue动态组件

标签:temp   name   nts   rip   from   imp   check   data   初始   

原文地址:https://www.cnblogs.com/zoo-x/p/14417079.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!