Vue Usage of Two Component Types: Recursive Components and Dynamic Components

1 recursive component

The characteristic of recursive components is that they can call themselves in their own template templates. It is worth noting that it must set the name property.

//  Recursive component  recursive.vue
<template>
 <div>
 <p> Recursive component </p>
 <Recursion :count="count + 1" v-if="count < 3"></Recursion>
 </div>
</template>

<script>
 export default {
 name: "Recursion",// You must set name Attribute 
 props: {
  count: {
  type: Number,
  default: 1
  }
 }
 }
</script>

In this example, the parent page will call the recursive component three times when using the recursive component. It is worth noting that the recursive component must set a limit on the number of recursions

Otherwise, an error will be thrown. In this example, count is used to limit the number of recursions.

2 Dynamic Components

If an Vue component is named Component, an error will be reported because Vue provides special elements < component > To dynamically mount different components.

And use the is feature to select the components to mount.

// parentComponent.vue
<template>
 <div>
 <h1> Parent component </h1>
 <component :is="currentView"></component>
 <button @click = "changeToViewB"> Switch to B View </button>
 </div>
</template>

<script>
 import ComponentA from '@/components/ComponentA'
 import ComponentB from '@/components/ComponentB'
 export default {
 components: {
  ComponentA,
  ComponentB
 },
 data() {
  return {
  currentView: ComponentA //  Default display component  A
  }
 },
 methods: {
  changeToViewB () {
  this.currentView = ComponentB //  Switch to Component  B
  }
 }
 }
</script>

By changing the value of currentView, the displayed components can be dynamically switched. Similar to the implementation principle of vue-router, the front-end routing to different pages is actually loading different components.

Additional knowledge: Vue route Part Simple Advanced Usage

1. Change the value of the page title

It is often necessary to change the browser's title value when switching to different pages during development, so we can configure the meta property when defining routes

To change the title value.

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: ' My message '
  }
  },
  {
   path: '/ChangeCommunity',
   name: 'ChangeCommunity',
   component: ChangeCommunity,
   meta: {
   title: ' My community '
   }
  },
 
]
})
vueRouter.beforeEach((to, from, next) => {
/*  Route Change Modification Page title */
if (to.meta.title) {
document.title = to.meta.title;
}
next();
})
export default vueRouter

When you jump from my information page to my community page, the corresponding title value will also change from "my information" to "my community".

2. Lazy route loading

When there are many project pages, all page routes are loaded during initialization, and the performance is 10 points poor. At this time, lazy loading can be used, and the page to be rendered will be loaded.

For example:

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

It's OK

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

It can be written in both ways.

3. Rolling behavior

With front-end routing, when you switch to a new route, you want the page to roll to the top, or keep the scrolling position as it did when you reloaded the page.

vue-router can do it, and even better, it allows you to customize how the page scrolls when the route is switched.

Note: This feature is only available in browsers that support history. pushState.

For example:

 　 const router = new VueRouter({
 routes: [...],
 scrollBehavior (to, from, savedPosition) {

 　  if (savedPosition) {
   　  　   return savedPosition// Scroll to the specified position 
   　  　   } else {
   　  　  return { x: 0, y: 0 }
   　  　   }
 } })
 The act of "scrolling to anchor point": 
scrollBehavior (to, from, savedPosition) {
 if (to.hash) {
 return {
  selector: to.hash
 }
 }
}
 Asynchronous scrolling 
scrollBehavior (to, from, savedPosition) {
 return new Promise((resolve, reject) => {
 setTimeout(() => {
  resolve({ x: 0, y: 0 })
 }, 500)
 })
}