Vue 두 가지 구성 요소 유형: 반복 구성 요소 및 동적 구성 요소 사용
귀속 구성 요소의 특성은 자신의template 템플릿에서 자신을 호출할 수 있다는 것이다.주의할 것은name 속성을 설정해야 합니다.
// recursive.vue
<template>
<div>
<p> </p>
<Recursion :count="count + 1" v-if="count < 3"></Recursion>
</div>
</template>
<script>
export default {
name: "Recursion",// name
props: {
count: {
type: Number,
default: 1
}
}
}
</script>
그렇지 않으면 오류가 발생합니다. 이 예에서count를 통해 귀속 횟수를 제한합니다.
다이내믹 어셈블리
Vue 구성 요소의 이름을 Component로 지정하면 오류가 발생합니다. 왜냐하면 Vue는 다른 구성 요소를 동적 마운트하기 위해 특수한 요소
마운트할 구성 요소를 선택하려면 is 특성을 사용하십시오.
// parentComponent.vue
<template>
<div>
<h1> </h1>
<component :is="currentView"></component>
<button @click = "changeToViewB"> B </button>
</div>
</template>
<script>
import ComponentA from '@/components/ComponentA'
import ComponentB from '@/components/ComponentB'
export default {
components: {
ComponentA,
ComponentB
},
data() {
return {
currentView: ComponentA // A
}
},
methods: {
changeToViewB () {
this.currentView = ComponentB // B
}
}
}
</script>
추가 정보: Vue route 섹션의 간단한 고급 사용 방법
1. 페이지 title 값 변경
개발할 때 종종 다른 페이지로 전환할 때 브라우저의 title 값을 바꾸어야 합니다. 그러면 루트를 정의할 때 메타 속성을 설정할 수 있습니다.
타이틀 값을 변경합니다.
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import UserInfo from ".././userInfo.vue";
import ChangeCommunity from ".././ChangeCommunity.vue";
var vueRouter= new Router({
routes: [
{
path: '/',
name: 'UserInfo',
component: UserInfo,
meta: {
title: ' '
}
},
{
path: '/ChangeCommunity',
name: 'ChangeCommunity',
component: ChangeCommunity,
meta: {
title: ' '
}
},
]
})
vueRouter.beforeEach((to, from, next) => {
/* title */
if (to.meta.title) {
document.title = to.meta.title;
}
next();
})
export default vueRouter
2. 루트 로드 게으름
프로젝트 페이지가 비교적 많을 때, 초기화할 때 모든 페이지의 루트를 불러옵니다. 성능이 매우 좋지 않으면, 게으름으로 불러올 수 있으며, 그 페이지를 렌더링하려면 그 페이지를 불러올 수 있습니다.
예:
{
path: '/ChangeCommunity',
name: 'ChangeCommunity',
component: ChangeCommunity,
resolve
},
{
path: '/ChangeCommunity',
name: 'ChangeCommunity',
component: resolve=>require(['ChangeCommunity'],resolve)
},3. 스크롤 동작
프런트엔드 라우팅을 사용하여 새 라우팅으로 전환할 때 페이지를 맨 위로 스크롤하거나 페이지를 다시 로드하는 것처럼 원래 스크롤 위치를 유지합니다.
vue-router는 루트가 전환될 때 페이지가 어떻게 굴러가는지 사용자 정의할 수 있을 뿐만 아니라, 더 좋습니다.
주의: 이 기능은 역사만 지원합니다.pushState 브라우저에서 사용할 수 있습니다.
예:
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition//
} else {
return { x: 0, y: 0 }
}
} })
“ ” ：
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash
}
}
}
scrollBehavior (to, from, savedPosition) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ x: 0, y: 0 })
}, 500)
})
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
