标签:temp name nts rip from imp check data 初始
如果我们不想让也面初始化的时候就加载所有的组件,就会用到动态组件
常用的场景是多tab的页面,每一个tab是一个组件这种
<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
标签:temp name nts rip from imp check data 初始
原文地址:https://www.cnblogs.com/zoo-x/p/14417079.html