동적 구성요소 구성요소
<component>동적 구성 요소는 데이터 변경에 따라 다른 구성 요소를 동적으로 로드하는 방법입니다. 동적 구성 요소를 사용하면 코드 복잡성을 효과적으로 줄이고 구성 요소 재사용성과 유연성을 향상시킬 수 있습니다.
동적 구성요소는 is라는 특수 속성을 통해 동적 로딩을 구현하며 is의 값은 구성요소 또는 구성요소 객체의 이름이 될 수 있습니다.
애플리케이션 시나리오:
예를 들어 세 페이지를 정의하려면 분포가 Home.vue, Products.vue 및 Contact.vue이며 각각 홈페이지, 제품 및 개인 센터에 해당하고 Tabbar.vue를 정의하면 세 개의 메뉴가 있습니다. Tabbar.vue에서 배포 홈 페이지, 제품 및 개인 센터입니다. Tabbar에서 해당 메뉴를 클릭해야 페이지가 해당 페이지로 전환됩니다. 여기에서 동적 구성 요소를 사용하여 동적으로 전환할 수 있습니다. 페이지
코드는 다음과 같습니다:
App.vue의 코드
<template>
<Tabbar></Tabbar>
<component :is="tabs[active]"></component>
</template>
<script setup>
import Tabbar from './components/Tabbar.vue';
import Home from './components/Home.vue';
import Products from './components/Products.vue';
import Contact from './components/Contact.vue';
import {
onMounted,reactive,ref } from 'vue';
import store from './store'
const active = ref('Home')
const tabs = {
Home,
Products,
Contact
}
onMounted(() => {
// 订阅
store.subscribe((value)=>{
active.value = value
})
})
</script>
<style scoped>
</style>
Tabbar.vue의 코드
<template>
<div>
<ul>
<li v-for="item in menuList" :key="item.key" @click="handleClick(item.key)">{
{
item.name }}</li>
<!-- <li @click="handleClick('Home')">首页</li>
<li @click="handleClick('Products')">产品</li>
<li @click="handleClick('Contact')">个人中心</li> -->
</ul>
</div>
</template>
<script setup>
import store from '../store'
import Home from './Home.vue';
const menuList = [
{
key:'Home',
name:'首页'
},
{
key:'Products',
name:'产品'
},
{
key:'Contact',
name:'个人中心'
},
]
function handleClick(value) {
// console.log(value);
store.publish(value)
}
</script>
<style scoped>
ul {
position: fixed;
bottom: 10px;
height: 50px;
line-height: 50px;
width: 100%;
display: flex;
justify-content: space-around;
list-style: none;
}
</style>
여기서는 JavaScript의 구독 게시 메커니즘이 사용됩니다.
src 디렉토리에 새 store.js 파일을 생성합니다. 코드는 다음과 같습니다.
export default {
datalist:[],
//订阅函数
subscribe(cb) {
this.datalist.push(cb)
},
//发布函数
publish(value){
this.datalist.forEach(cb=>cb(value))
}
}
그런 다음 App.vue에 store.js를 도입하고, onMounted 함수에서 구독 함수를 호출하고, Tabbar.vue에 store.js를 도입하고, 클릭 이벤트에서 게시 함수를 호출하고, 게시합니다.
기본적으로 동적 구성 요소 인스턴스는 교체 시 소멸됩니다. 이로 인해 변경된 상태가 손실됩니다. 구성 요소가 다시 표시되면 초기 상태로만 새 인스턴스가 생성됩니다. 전환 시 구성 요소가 파괴되지 않는다는 것을 인식해야 하는 경우 vue에서 제공하는 내장 구성 요소인 KeepAlive와 협력해야 합니다.
살아 유지
KeepAlive는 여러 구성 요소 간에 동적으로 전환할 때 제거된 구성 요소 인스턴스를 캐시하는 기능을 하는 내장 구성 요소입니다. 동적 구성 요소 인스턴스를 캐싱하고 다중 렌더링을 방지하기 위한 기본 제공 구성 요소입니다. KeepAlive 구성 요소로 동적 구성 요소를 래핑하면 구성 요소 캐싱, 재사용 및 구성 요소 성능 향상과 같은 기능을 구현할 수 있습니다.
KeepAlive의 사용은 매우 간단합니다. KeepAlive 태그에 동적 구성 요소를 래핑하기만 하면 됩니다.
<KeepAlive>
<component :is="tabs[active]"></component>
</KeepAlive>
KeepAlive 포함 및 제외
기본적으로 KeepAlive는 위의 예와 같이 KeepAlive 내부의 모든 구성 요소 인스턴스를 캐시합니다.기본적으로 KeepAlive는 홈, 제품 및 연락처 구성 요소를 캐시합니다.연락처 구성 요소 대신 홈 및 제품 구성 요소의 콘텐츠를 캐시하려는 경우 , this , 우리는
포함 또는 제외 속성을 사용하여 구현할 수 있으며
include 값은 캐시해야 하는 구성 요소와 캐시할 필요가 없는 구성 요소를 나타내는 문자열, 정규식, 함수 등이 될 수 있습니다.exclude
-
include: 캐싱이 필요한 컴포넌트를 매칭하기 위해 사용하는 속성으로, 이름을 나타내는 문자열, 정규표현식, 함수 등이 될 수 있으며, 컴포넌트 객체를 전달하고 Boolean 값을 반환한다. 일치하는 구성 요소만 캐시됩니다. -
exclude: 캐싱할 필요가 없는 컴포넌트를 매칭하기 위해 사용하는 속성으로, 이름을 나타내는 문자열, 정규표현식, 함수 등이 될 수 있으며, 컴포넌트 객체를 전달하고 boolean 값을 반환한다. 일치하는 구성 요소는 캐시되지 않습니다.
홈 및 제품 구성 요소 캐싱을 위한 샘플 코드 포함
// 字符串形式
<KeepAlive include="Home,Products">
<component :is="tabs[active]"></component>
</KeepAlive>
//正则表达式 (需使用 v-bind)
<KeepAlive :include="/Home|Products/">
<component :is="tabs[active]"></component>
</KeepAlive>
//数组形式 (需使用 v-bind)
<KeepAlive :include="['Home','Products']/">
<component :is="tabs[active]"></component>
</KeepAlive>
제외 캐시에는 홈 및 제품 구성 요소에 대한 샘플 코드가 포함되어 있지 않습니다.
// 字符串形式
<KeepAlive exclude="Home,Products">
<component :is="tabs[active]"></component>
</KeepAlive>
//正则表达式 (需使用 v-bind)
<KeepAlive :exclude="/Home|Products/">
<component :is="tabs[active]"></component>
</KeepAlive>
//数组形式 (需使用 v-bind)
<KeepAlive :exclude="['Home','Products']/">
<component :is="tabs[active]"></component>
</KeepAlive>
vue에서 동적 구성 요소 및 KeepAlive 구성 요소의 사용 방법을 여기에서 소개합니다. 좋아하는 친구, 좋아요, 팔로우 및 컬렉션 추가!