一递归组件
递归组件的特性就是可以在自己的template模板中调用自己本身。值得注意的它必须设置name属性。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
// 递归组件 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特性来选择要挂载的组件。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
// 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值。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
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值也会由“我的信息”变成“我的社区”。
二、路由懒加载
当项目页面比较多时，初始化时候加载所有页面路由，性能十分差，这时候就可用懒加载，要渲染那个页面就加载那个页面。
例如:
|
1
2
3
4
5
6
|
{ path: '/ChangeCommunity', name: 'ChangeCommunity', component: ChangeCommunity, resolve}, |
还可以
|
1
2
3
4
5
|
{ path: '/ChangeCommunity', name: 'ChangeCommunity', component: resolve=>require(['ChangeCommunity'],resolve)}, |
两种写法都可以。
三 、滚动行为
使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。
vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。
注意：这个功能只在支持 history.pushState 的浏览器中可用。
例如:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
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两种组件类型:递归组件和动态组件的用法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。
原文链接：https://www.cnblogs.com/myspecialzone/p/10405560.html
