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

2023-07-19 04:30:03 263

一递归组件

递归组件的特性就是可以在自己的template模板中调用自己本身。值得注意的它必须设置name属性。

//递归组件recursive.vue

这个例子中父页面使用该递归组件会调用三次recursive组件，值得注意的是递归组件必须设置递归次数限制数量

否则会抛出错误，该例子中通过count来限制递归次数。

二动态组件

如果将一个Vue组件命名为Component会报错，因为Vue提供来特殊的元素来动态挂载不同组件。

并使用is特性来选择要挂载的组件。

//parentComponent.vue

通过改变currentView的值就可以动态切换显示的组件，与之类似的是vue-router的实现原理，前端路由到不同的页面实际上就是加载不同的组件。

补充知识：Vueroute部分简单高级用法

一、改变页面title的值

在开发时常常需要在切换到不同页面时改变浏览器的title值，那么我们就可以在定义路由的时候通过配置meta属性

来改变title值。

importVuefrom'vue'
importRouterfrom'vue-router'
Vue.use(Router)
importUserInfofrom".././userInfo.vue";
importChangeCommunityfrom".././ChangeCommunity.vue";

varvueRouter=newRouter({
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();
})
exportdefaultvueRouter

当从我的信息页面跳转到我的社区页面时，对应的title值也会由“我的信息”变成“我的社区”。

二、路由懒加载

当项目页面比较多时，初始化时候加载所有页面路由，性能十分差，这时候就可用懒加载，要渲染那个页面就加载那个页面。

例如:

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

还可以

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

两种写法都可以。

三、滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。

vue-router能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

注意：这个功能只在支持history.pushState的浏览器中可用。

例如:

constrouter=newVueRouter({
routes:[...],
scrollBehavior(to,from,savedPosition){

if(savedPosition){
returnsavedPosition//滚动到指定位置
}else{
return{x:0,y:0}
}
}})
“滚动到锚点”的行为：
scrollBehavior(to,from,savedPosition){
if(to.hash){
return{
selector:to.hash
}
}
}
异步滚动
scrollBehavior(to,from,savedPosition){
returnnewPromise((resolve,reject)=>{
setTimeout(()=>{
resolve({x:0,y:0})
},500)
})
}

以上这篇Vue两种组件类型:递归组件和动态组件的用法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

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

父组件

随机推荐

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

父组件

热门推荐

随机推荐