Vue两种组件类型:递归组件和动态组件的用法

发布时间：2020-10-21 11:57:40 作者：显示有误
来源：脚本之家阅读：357

一递归组件

递归组件的特性就是可以在自己的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两种组件类型:递归组件和动态组件的用法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持亿速云。

Vue两种组件类型:递归组件和动态组件的用法

相关阅读