当前位置：首页 > news >正文

Vue组件：动态组件、缓存组件、异步组件

news 来源：原创 2024/9/20 16:45:29

1、动态组件

Vue.js 提供了对动态组件的支持。在使用动态组件时，多个组件使用同一挂载点，根据条件在不同组件之间进行动态切换。动态组件通过使用 Vue.js 中的 <component>元素，动态绑定到该元素的 is 属性，根据 is 属性的值来判断使用哪个组件。

语法格式如下：

<!-- 动态组件 -->
<component :is="componentName"></component>

动态组件经常应用在路由控制或选项卡切换中。下面通过一个切换选项卡的实例来说明动态组件的基本用法。

【实例】动态组件的基本用法。

（1）创建 ComponentA.vue 组件

<template><fieldset><legend>组件A</legend><p>博客信息：{{ blogName }}</p><p>博客地址：{{ blogUrl }}</p></fieldset>
</template><script>
export default {data() {return {blogName: '您好，欢迎访问 pan_junbiao的博客',blogUrl: 'https://blog.csdn.net/pan_junbiao'}}
}
</script>

（2）创建 ComponentB.vue 组件

<template><fieldset><legend>组件B</legend><p>用户名称：<input type="text" v-model="userModel.userName" /></p><p>用户年龄：<input type="number" v-model="userModel.age" /></p><p>用户性别：<input id="male" type="radio" value="1" v-model="userModel.sex" /><label for="male">男</label><input id="female" type="radio" value="2" v-model="userModel.sex" /><label for="female">女</label></p><button @click="loadData">加载数据</button></fieldset>
</template><script>
export default {data() {return {userModel: {userName: '',age: 0,sex: 2}}},methods: {loadData: function () {this.userModel.userName = 'pan_junbiao的博客';this.userModel.age = 36;this.userModel.sex = 1;}}
}
</script><style scoped>
.b_text {width: 300px;padding: 3px;font-size: 16px;
}
</style>

（3）在 App.vue 根组件中引入两个组件，并实现切换功能

<template><button :disabled="active" @click="trigger('ComponentA')">组件 A</button><button :disabled="!active" @click="trigger('ComponentB')">组件 B</button><!-- 第三步：使用动态组件 --><component :is="componentName"></component>
</template><script>
//第一步：引用组件
import ComponentA from '@/components/ComponentA.vue';
import ComponentB from '@/components/ComponentB.vue';export default {data() {return {componentName: 'ComponentA',active: true}},//第二步：注册组件components: {ComponentA,ComponentB},methods: {//切换组件trigger: function (componentName) {this.componentName = componentName;this.active = !this.active;}}
}
</script><style>
button {font-size: 16px;padding: 5px 20px;margin: 0px 10px 10px 0px;
}
</style>

执行结果：

（1）切换组件A效果：

（2）切换组件B效果：

2、缓存组件

在多个组件之间进行切换的时候，有时需要保持这些组件的状态，将切换后的状态保留在内存中，以避免重复渲染。为了解决这个问题，可以用一个 <keep-alive> 元素将动态组件包含起来。

语法格式如下：

<!-- 缓存组件 -->
<keep-alive><component :is="componentName"></component>
</keep-alive>

【实例】实现选项卡内容的缓存效果。

修改 App.vue 根组件中引入两个组件，并使用 <keep-alive> 元素实现组件内容的缓存效果。

<template><button :disabled="active" @click="trigger('ComponentA')">组件 A</button><button :disabled="!active" @click="trigger('ComponentB')">组件 B</button><!-- 第三步：使用缓存组件 --><keep-alive><component :is="componentName"></component></keep-alive>
</template>

执行结果：

3、异步组件

异步组件是Vue.js中的另一个重要特性，它允许你定义一个组件，但不是立即加载它，而是在需要时才加载。这种机制对于构建大型应用程序尤其有用，因为它可以帮助减少应用程序的初始加载时间，提高性能。异步组件通过动态导入模块来实现，这使得组件的加载成为异步操作。

语法格式如下：

// 第一步：导入 defineAsyncComponent 函数
import { defineAsyncComponent } from 'vue'// 第二步：定义异步组件
const ComponentB = defineAsyncComponent(() => import('@/components/ComponentB.vue'));

【实例】使用异步组件。

修改 App.vue 根组件中引入两个组件，其中组件B使用异步组件。

<template><button :disabled="active" @click="trigger('ComponentA')">组件 A</button><button :disabled="!active" @click="trigger('ComponentB')">组件 B</button><!-- 第三步：使用缓存组件 --><keep-alive><component :is="componentName"></component></keep-alive>
</template><script>
// 导入 defineAsyncComponent 函数
import { defineAsyncComponent } from 'vue'//第一步：引用组件
import ComponentA from '@/components/ComponentA.vue';
//import ComponentB from '@/components/ComponentB.vue';// 核心代码：定义异步组件
const ComponentB = defineAsyncComponent(() => import('@/components/ComponentB.vue'));export default {data() {return {componentName: 'ComponentA',active: true}},//第二步：注册组件components: {ComponentA,ComponentB},methods: {//切换组件trigger: function (componentName) {this.componentName = componentName;this.active = !this.active;}}
}
</script><style>
button {font-size: 16px;padding: 5px 20px;margin: 0px 10px 10px 0px;
}
</style>