Directorio de artículos
componentes dinámicos
1. Componentes dinámicos
Los componentes dinámicos se refieren a cambiar dinámicamente la visualización y ocultación de componentes. Vue proporciona un <component>componente , que se utiliza especialmente para lograr una representación dinámica de los componentes.
①Es
<component>el marcador de posición del componente ②
Especifique dinámicamente el nombre del componente que se representará a través del atributo is③<component is="要渲染的组件的名称"></component>
2. Implementar renderizado de componentes dinámicos
<template>
<div>
<h1>App 组件</h1>
<!-- 切换组件的按钮 -->
<button @click="comName='Com_1'"> 显示组件1 </button>
<button @click="comName='Com_2'"> 显示组件2 </button>
<hr>
<!-- 动态组件显示区域 -->
<component :is="comName"></component>
</div>
</template>
<script>
import Com_1 from './Com_1.vue'
import Com_2 from './Com_2.vue'
export default {
name: 'App',
data() {
return {
// 组件名字
comName: ''
}
},
components: {
Com_1,
Com_2
}
}
</script>
<style>
</style>
<template>
<div>
<h3>Com_1 组件</h3>
</div>
</template>
<script>
export default {
name: 'Com_1'
}
</script>
<style>
</style>
<template>
<div>
<h3>Com_2 组件</h3>
</div>
</template>
<script>
export default {
name: 'Com_2'
}
</script>
<style>
</style>
3. Use keep-alive para mantener el estado
De forma predeterminada, el estado de un componente no se puede mantener al cambiar componentes dinámicos. En este punto, puede usar los <keep-alive> componentes integrados de vue para mantener el estado de los componentes dinámicos.
Los estados del componente correspondientes a los tres estados anteriores:
Al cambiar componentes, los componentes se destruyen y crean dinámicamente.
Mantener el estado de los componentes dinámicos.
Agregar una capa fuera del componente dinámico<keep-alive>
<!-- 动态组件显示区域 -->
<keep-alive>
<component :is="comName"></component>
</keep-alive>
<template>
<div>
<h1>App 组件</h1>
<!-- 切换组件的按钮 -->
<button @click="comName='Com_1'"> 显示组件1 </button>
<button @click="comName='Com_2'"> 显示组件2 </button>
<hr>
<!-- 动态组件显示区域 -->
<keep-alive>
<component :is="comName"></component>
</keep-alive>
</div>
</template>
<script>
import Com_1 from './Com_1.vue'
import Com_2 from './Com_2.vue'
export default {
name: 'App',
data() {
return {
// 组件名字
comName: ''
}
},
components: {
Com_1,
Com_2
}
}
</script>
<style>
</style>
Agregar una capa fuera del componente dinámico <keep-alive>almacenará en caché el estado del componente, no destruirá el componente, activará dinámicamente el componente y mantendrá el estado del componente.
