一遞歸組件

遞歸組件的特性就是可以在自己的template模板中調(diào)用自己本身。值得注意的它必須設(shè)置name屬性。

// 遞歸組件 recursive.vue<template> <div> <p>遞歸組件</p> <Recursion :count='count + 1' v-if='count < 3'></Recursion> </div></template><script> export default { name: 'Recursion',//必須設(shè)置name屬性 props: { count: { type: Number, default: 1 } } }</script>

這個(gè)例子中父頁(yè)面使用該遞歸組件會(huì)調(diào)用三次recursive組件，值得注意的是遞歸組件必須設(shè)置遞歸次數(shù)限制數(shù)量

否則會(huì)拋出錯(cuò)誤，該例子中通過(guò)count來(lái)限制遞歸次數(shù)。

二 動(dòng)態(tài)組件

如果將一個(gè)Vue組件命名為Component會(huì)報(bào)錯(cuò)，因?yàn)閂ue提供來(lái)特殊的元素<component>來(lái)動(dòng)態(tài)掛載不同組件。

并使用is特性來(lái)選擇要掛載的組件。

// 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 // 默認(rèn)顯示組件 A } }, methods: { changeToViewB () { this.currentView = ComponentB // 切換到組件 B } } }</script>

通過(guò)改變currentView的值就可以動(dòng)態(tài)切換顯示的組件，與之類(lèi)似的是vue-router的實(shí)現(xiàn)原理，前端路由到不同的頁(yè)面實(shí)際上就是加載不同的組件。

補(bǔ)充知識(shí)：Vue route部分簡(jiǎn)單高級(jí)用法

一、改變頁(yè)面title的值

在開(kāi)發(fā)時(shí)常常需要在切換到不同頁(yè)面時(shí)改變?yōu)g覽器的title值，那么我們就可以在定義路由的時(shí)候通過(guò)配置 meta 屬性

來(lái)改變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: ’我的社區(qū)’ } }, ]})vueRouter.beforeEach((to, from, next) => {/* 路由發(fā)生變化修改頁(yè)面title */if (to.meta.title) {document.title = to.meta.title;}next();})export default vueRouter

當(dāng)從我的信息頁(yè)面跳轉(zhuǎn)到我的社區(qū)頁(yè)面時(shí)，對(duì)應(yīng)的title值也會(huì)由“我的信息”變成“我的社區(qū)”。

二、路由懶加載

當(dāng)項(xiàng)目頁(yè)面比較多時(shí)，初始化時(shí)候加載所有頁(yè)面路由，性能十分差，這時(shí)候就可用懶加載，要渲染那個(gè)頁(yè)面就加載那個(gè)頁(yè)面。

例如:

{ path: ’/ChangeCommunity’, name: ’ChangeCommunity’, component: ChangeCommunity, resolve },

還可以

{ path: ’/ChangeCommunity’, name: ’ChangeCommunity’, component: resolve=>require([’ChangeCommunity’],resolve) },

兩種寫(xiě)法都可以。

三 、滾動(dòng)行為

使用前端路由，當(dāng)切換到新路由時(shí)，想要頁(yè)面滾到頂部，或者是保持原先的滾動(dòng)位置，就像重新加載頁(yè)面那樣。

vue-router 能做到，而且更好，它讓你可以自定義路由切換時(shí)頁(yè)面如何滾動(dòng)。

注意：這個(gè)功能只在支持 history.pushState 的瀏覽器中可用。

例如:

　const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) {　 if (savedPosition) { return savedPosition//滾動(dòng)到指定位置 } else { return { x: 0, y: 0 } } } })“滾動(dòng)到錨點(diǎn)”的行為：scrollBehavior (to, from, savedPosition) { if (to.hash) { return { selector: to.hash } }}異步滾動(dòng)scrollBehavior (to, from, savedPosition) { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ x: 0, y: 0 }) }, 500) })}

以上這篇Vue兩種組件類(lèi)型:遞歸組件和動(dòng)態(tài)組件的用法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。