一遞歸組件

遞歸組件的特性就是可以在自己的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> <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>

通過改變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兩種組件類型:遞歸組件和動態組件的用法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。