vue组件与复用详解
作者:柴小智 发布时间:2024-04-09 10:46:57
一、什么是组件
组件 (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组件与复用详解网站的支持!
来源:https://www.cnblogs.com/chaixiaozhi/archive/2018/04/08/8744209.html
猜你喜欢
- 前言最近由于项目需要,需要读取一个含有中文的txt文档,完了还要保存文件。文档之前是由base64编码,导致所有汉字读取显示乱码。项目组把b
- Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码.一、示例var
- python中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程。Python提供
- 前言索引对有一定开发经验的同学来说并不陌生,合理使用索引,能大大提升sql查询的性能,可以这么讲,随着业务数据量的不断增长,优化系统的响应速
- 本文实例讲述了PHP接口多继承及tarits实现多继承效果的方法。分享给大家供大家参考,具体如下:接口多继承在PHP的面向对象中,接口可以继
- 最近遇到需要将关联表中的某个字段全部查询出来并且重新组合为一个字段,这个时候普通的连接查询就满足不了需求了,需要用到SQL函数来完成:ALT
- 在tensorflow中,经常会遇到参数初始化问题,比如在训练自己的词向量时,需要对原始的embeddigs矩阵进行初始化,更一般的,在全连
- 关于mysql效率优化一般通过以下两种方式定位执行效率较低的sql语句。通过慢查询日志定位那些执行效率较低的 SQL 语句,用 --log-
- 不用切图,只要设置基本的 图片及其属性即可!用鼠标右键控制图片翻转!<style>*{ FONT-SIZE: 12px; }se
- 前言大部分初学编程的人来说刚开始都会练习判断两个数或者三个数的大小,来熟悉某种语言的特性和最基本的if,else循环,当我们学习了更高级的语
- 数据库镜像方案有两种镜像运行模式。一种是“高安全性模式”,它支持同步操作。在高安全性模式下,当会话开
- 本文实例讲述了Selenium元素的常用操作方法。分享给大家供大家参考,具体如下:Selenium是一个用于Web应用程序测试的工具。Sel
- 需求手百小程序的toast仅支持在页中展示,不能自定义位置、字体大小、在单个文本中增加icon等需求;因此自定义一个全局可通用的Toast。
- 本文实例讲述了flask框架配置mysql数据库操作。分享给大家供大家参考,具体如下:该篇博客配置环境为:python版本3.5,flask
- 对于软件来说,每一个新版本的推出都应该是一种进步,不可否认,阿里旺旺2008版相较于之前的版本的确是有很多的进步,但进步的同时却也有着比之前
- 本文实例为大家分享了vue仿写下拉菜单功能,带有过渡效果(移动端),供大家参考,具体内容如下效果图clickOutside.js 点击目标之
- 当使用SqlDataSource控件选择数据时,可以从两个属性:ConnectionString和SelectCommand开始,如下所示:
- 引言最近python语言大火,除了在科学计算领域python有用武之地之外,在游戏、后台等方面,python也大放异彩,本篇博文将按照正规的
- 当我们使用一个数据库时,总希望数据库的内容是可靠的、正确的,但由于计算机系统的故障(包括机器故障、介质故障、误操作等),数据库有时也可能遭到
- 如果你细心跟踪一下SQL Server数据库服务器的登录过程,你会发现口令计算其实是非常脆弱的,SQL Server数据库的口令脆弱体现两方