vue组件与复用详解


Posted in Javascript onApril 08, 2018

一、什么是组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。

二、组件用法

组件需要注册后才可以使用,注册有全局注册和局部注册两种方式。

2.1 全局注册后,任何V ue 实例都可以使用。如:      

<div id="app1">
      <my-component></my-component>
    </div>
Vue.component('my-component',{
  template: '<div>这里是组件的内容</div>'
});
var app1 = new Vue({
  el: '#app1'
});

 要在父实例中使用这个组件,必须要在实例创建前注册,之后就可以用<my-component></my- component> 的形式来使用组件了

template的DOM结构必须被一个元素包含, 如果直接写成“这里是组件的内容”, 不带“<div></ div >”是无法渲染的。(而且最外层只能有一个根的<div>标签)

2.2 在Vue 实例中,使用component选项可以局部注册组件,注册后的组件只有在该实例作用域下有效。如:

<div id="app2">
      <my-component1></my-component1>
    </div>
var app2 = new Vue({
  el: '#app2',
  components:{
   'my-component1': {
     template: '<div>这里是局部注册组件的内容</div>'
   }
  }
});

2.3 data必须是函数

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

<div id="app3">
      <my-component3></my-component3>
    </div>
Vue.component('my-component3',{
  template: '<div>{{message}}</div>',
  data: function(){
    return {
      message: '组件内容'
    }
  }
});
var app3 = new Vue({
  el: '#app3'
});

 一般return的对象不要引用外部的对象,因为如果return 出的对象引用了外部的一个对象, 那这个对象就是共享的, 任何一方修改都会同步。

所以一般给组件返回一个新的独立的data对象。

补充:vue-router 组件复用问题

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

问题

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

- 停用并移除不需要的组件
- 验证切换的可行性
- 复用没有进行更新的组件
- 启用并激活新的组件

具体路由切换控制流程请参考官方文档:切换控制流水线

那vue-router是怎么判断某一个组件可以复用的呢? 我们看一下下面这条路由配置:

{
  path: 'post/:postId',
  name: 'post',
  component: resolve => require(['./components/Post.vue'],resolve)
}

这是通过文章ID加载对应文章页面的路由,第一次访问时,Post.vue这个组件会被渲染到组件树中,mounted安装组件时通过文章ID获取文章内容展示到页面上,当我们访问另一篇文章时,路由参数:postId发生改变,按照我们的预期应该会展示新文章的内容,但是事与愿违。

我们看到的还是之前的文章,虽然路由参数已发生更改,但是vue-router会以为你访问的是Post.vue这个组件,由于之前已经渲染过该组件,所以会直接复用之前的组件,并且不会执行组件中的任何操作包括mounted之类的生命周期函数。

所以我们最终看到的还是原来组件的内容。

那要怎么才能实现我们期望的效果呢?下面介绍一种有效的解决方法

解决方法

我们可以使用watch侦听器来监听路由的变化情况,根据路由参数的变化来响应相应的数据,具体实现过程是这样的:

定义数据获取方法

首先定义一个获取文章的方法,根据文章ID从后台获取对应的文章信息。

methods: {
  getPost(postId) {
    this.$http.get(`/post/get_post/${postId}`).then((response) => {
      if(response.data.code === 0){
        this.post = response.data.post;
      }
    });
  }
}

监听路由

接着是在路由切换的时候判断目标组件是否是Post.vue组件,这里可以根据定义的路由名称name实现,如果是,我们就可以从路由信息中获取目标文章ID来更新组件内容。

watch: {
  '$route' (to, from) {
    if(to.name === 'post'){
      this.getPost(to.params.postId);
    }
  }
}

组件初始化

这里需要注意的是,当组件首次被挂载到组件树上时,对路由的监听是无效的,这时我们需要在生命周期钩子mounted对组件进行初始化工作:

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

写在最后

通过上面的方法就可以实现组件内容随路由参数的变化而更新了,有效解决了vue-router组件复用导致路由参数失效的问题。

总结

以上所述是小编给大家介绍的vue组件与复用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 实用的文字链提示框效果
Jun 30 Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
JavaScript寄生组合式继承实例详解
Jan 06 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
jquery实现动态添加附件功能
Oct 23 jQuery
layui lay-verify form表单自定义验证规则详解
Sep 18 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 #Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 #Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 #Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 #Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 #Javascript
Js面试算法详解
Apr 08 #Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 #Javascript
You might like
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python pickle 和 shelve模块的用法
2013/09/16 Python
python的三目运算符和not in运算符使用示例
2014/03/03 Python
Python实现获取网站PR及百度权重
2015/01/21 Python
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
Django如何批量创建Model
2020/09/01 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
医学生求职自荐书
2014/06/12 职场文书
实验室标语
2014/06/21 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
云台山导游词
2015/02/03 职场文书
检讨书格式范文
2015/05/07 职场文书
运动会开幕式致辞
2015/07/29 职场文书
少先队中队工作总结
2015/08/14 职场文书
Rust中的Struct使用示例详解
2022/08/14 Javascript