溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一遞歸組件
遞歸組件的特性就是可以在自己的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>
這個例子中父頁面使用該遞歸組件會調用三次recursive組件，值得注意的是遞歸組件必須設置遞歸次數限制數量
否則會拋出錯誤，該例子中通過count來限制遞歸次數。
二 動態組件
如果將一個Vue組件命名為Component會報錯，因為Vue提供來特殊的元素<component>來動態掛載不同組件。
并使用is特性來選擇要掛載的組件。
// parentComponent.vue
<template>
<div>
<h2>父組件</h2>
<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>
通過改變currentView的值就可以動態切換顯示的組件，與之類似的是vue-router的實現原理，前端路由到不同的頁面實際上就是加載不同的組件。
補充知識：Vue route部分簡單高級用法
一、改變頁面title的值
在開發時常常需要在切換到不同頁面時改變瀏覽器的title值，那么我們就可以在定義路由的時候通過配置 meta 屬性
來改變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
當從我的信息頁面跳轉到我的社區頁面時，對應的title值也會由“我的信息”變成“我的社區”。
二、路由懶加載
當項目頁面比較多時，初始化時候加載所有頁面路由，性能十分差，這時候就可用懶加載，要渲染那個頁面就加載那個頁面。
例如:
{
path: '/ChangeCommunity',
name: 'ChangeCommunity',
component: ChangeCommunity,
resolve
},
還可以
{
path: '/ChangeCommunity',
name: 'ChangeCommunity',
component: resolve=>require(['ChangeCommunity'],resolve)
},
兩種寫法都可以。
三 、滾動行為
使用前端路由，當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。
vue-router 能做到，而且更好，它讓你可以自定義路由切換時頁面如何滾動。
注意：這個功能只在支持 history.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)
})
}
以上這篇Vue兩種組件類型:遞歸組件和動態組件的用法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
