快捷導(dǎo)航

Vue兩種組件類型:遞歸組件和動(dòng)態(tài)組件的用法

更新時(shí)間：2020年08月06日 16:34:18 作者：顯示有誤

這篇文章主要介紹了Vue兩種組件類型:遞歸組件和動(dòng)態(tài)組件的用法說明，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

一遞歸組件

遞歸組件的特性就是可以在自己的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è)例子中父頁面使用該遞歸組件會(huì)調(diào)用三次recursive組件，值得注意的是遞歸組件必須設(shè)置遞歸次數(shù)限制數(shù)量

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

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

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

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

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

補(bǔ)充知識：Vue route部分簡單高級用法

一、改變頁面title的值

在開發(fā)時(shí)常常需要在切換到不同頁面時(shí)改變?yōu)g覽器的title值，那么我們就可以在定義路由的時(shí)候通過配置 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: '我的社區(qū)'
   }
  },
 
]
})
vueRouter.beforeEach((to, from, next) => {
/* 路由發(fā)生變化修改頁面title */
if (to.meta.title) {
document.title = to.meta.title;
}
next();
})
export default vueRouter

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

二、路由懶加載

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

例如:

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

還可以

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

兩種寫法都可以。

三、滾動(dòng)行為

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

vue-router 能做到，而且更好，它讓你可以自定義路由切換時(shí)頁面如何滾動(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兩種組件類型:遞歸組件和動(dòng)態(tài)組件的用法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: