深入解析vue组件与复用

原创 年树先生 随笔 vue 13889阅读 21 天前 举报

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。这篇文章主要介绍了vue组件与复用,需要的朋友可以参考下

一、什么是组件
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。
二、组件用法
组件需要注册后才可以使用,注册有全局注册和局部注册两种方式。
2.1 全局注册后,任何V ue 实例都可以使用。如:

要在父实例中使用这个组件,必须要在实例创建前注册,之后就可以用<my-component></my- component> 的形式来使用组件了
template的DOM结构必须被一个元素包含, 如果直接写成“这里是组件的内容”, 不带“<div></ div >”是无法渲染的。(而且最外层只能有一个根的<div>标签)
2.2 在Vue 实例中,使用component选项可以局部注册组件,注册后的组件只有在该实例作用域下有效。如:

2.3 data必须是函数
除了template选项外,组件中还可以像Vue实例那样使用其他的选项,比如data 、computed 、methods等。但是在使用data时,和实例稍有区别, data 必须是函数,然后将数据return 出去。

一般return的对象不要引用外部的对象,因为如果return 出的对象引用了外部的一个对象, 那这个对象就是共享的, 任何一方修改都会同步。
所以一般给组件返回一个新的独立的data对象。
vue-router 组件复用问题

组件系统是Vue的一个重要组成部分,它可以将一个复杂的页面抽象分解成许多小型、独立、可复用的组件,通过组合组件来组成应用程序,结合vue-router的路由功能将各个组件映射到相应的路由上,通过路由的变化来告诉Vue要在哪里渲染他们,实现各个组件、各个页面之间的跳转导航。

使用vue-router切换路由时会触发组件树的更新,根据定义的路由渲染一个新的组件树,大致的切换过程是这样的:

  • 停用并移除不需要的组件
  • 验证切换的可行性
  • 复用没有进行更新的组件
  • 启用并激活新的组件
    具体路由切换控制流程请参考官方文档:切换控制流水线
    那vue-router是怎么判断某一个组件可以复用的呢? 我们看一下下面这条路由配置:

methods: {
getPost(postId) {
this.$http.get(/post/get_post/${postId}).then((response) => {
if(response.data.code === 0){
this.post = response.data.post;
}//欢迎加入全栈开发交流圈一起学习交流:864305860
});//面向1-3年前端人员
}//帮助突破技术瓶颈,提升思维能力
}

watch: {
'$route' (to, from) {
if(to.name === 'post'){
this.getPost(to.params.postId);
}//欢迎加入全栈开发交流圈一起学习交流:864305860
}//面向1-3年前端人员
}//帮助突破技术瓶颈,提升思维能力

mounted() {
this.getPost(this.$route.params.postId);
}

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复