vue组件与复用详解
一、什么是组件
组件 (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组件与复用详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
您可能感兴趣的文章:
- 在vue中封装可复用的组件方法
- vue2实现可复用的轮播图carousel组件详解
- VUE element-ui 写个复用Table组件的示例代码
- 详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
- vue mixins组件复用的几种方式（小结）
- 详解打造 Vue.js 可复用组件
- Vue.js实现一个漂亮、灵活、可复用的提示组件示例
相关推荐
-
VUE element-ui 写个复用Table组件的示例代码
饿了么的table组件功能很强大,对于项目中的各种表格基本够用,但是--个人对于它以列为单位的操作不习惯 =.=所以改成了另一种方式(我不会告诉你其实本质没变). 项目中表格较多,所以复用性最重要 步骤一 先来个基本的表格展示 官例的tableData tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address:
-
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
混合是什么 混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混合对象可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项. 例如: var tpl1={ template:'#stpl1', data:function(){ return {msg:false} }, methods:{ msgf:function(){ this.msg=!this.msg } } } var tpl2={ template:'#stpl2', d
-
vue mixins组件复用的几种方式（小结）
最近在做项目的时候,研究了mixins,此功能有妙处.用的时候有这样一个场景,页面的风格不同,但是执行的方法,和需要的数据非常的相似.我们是否要写两种组件呢?还是保留一个并且然后另个一并兼容另一个呢? 不管以上那种方式都不是很合理,因为组件写成2个,不仅麻烦而且维护麻烦:第二种虽然做了兼容但是页面逻辑造成混乱,必然不清晰:有没有好的方法,有那就是用vue的混合插件mixins.混合在Vue是为了提出相似的数据和功能,使代码易懂,简单.清晰. 1.场景 假设我们有几个不同的组件,它们的工作是切换状
-
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
这次的教程里,我们要把组件化进行到底!最近半年的几个项目中,都遇到了需要使用Toast或者Notification组件的情况.在目前已有的一些基于Vue.js开发的组件库,都没有找到太合适的,所以自己重头实现了一个.历经几个项目的磨练,这个提示组件的功能已经越来越完善,这次就分享一下组件以及其实现思路吧. 深入组件化,组件的拆分.整合与复用 Vue.js的组件化可以说是其招牌特性之一,而在实际应用时,并非一味地追求组件颗粒越小越好,而是需要根据项目的实际需求,来分析自己需要什么级别的组件. 例如
-
在vue中封装可复用的组件方法
本次封装的组件以toast组件为例 以前使用移动端ui插件时,通过一句代码比如 $.toast( ' 需要显示的内容 ' ),从而在页面上展示这段文字,并在一定时间后消失. 现在我们也尝试自己封装toast组件. 准备工作:vue-cli脚手架工程 先看一下涉及到的文件目录截图: 这次的封装主要涉及的文件是Toast.vue toast.js Hello.vue,主要思路如下: ① Toast.vue是我们要使用的toast组件: ② toast.js里面用Vue.extend()扩展一个组件构
-
vue2实现可复用的轮播图carousel组件详解
本文实例为大家分享了vue2实现轮播图carousel组件的使用方法,供大家参考,具体内容如下 1.千年老规矩,上效果图,说明功能: (1) 实现定时器,鼠标未移上图片时,自动轮播切换 (2) 有左右切换按钮,可切换至上一张.下一张 (3)有底部小图标,可自由切换至任意一张 github参考地址:https://github.com/chuanzaizai/vue_carousel 2.组件设计思路: (1)由于是可复用的子组件,图片的宽高.定时器间隔时间.轮播图list应由父组件传入 (2)定
-
详解打造 Vue.js 可复用组件
Vue.js 是一套构建用户界面的渐进式框架.我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件. 从维护视图到维护数据,Vue.js 让我们快速地开发应用.但随着业务代码日益庞大,组件也越来越多,组件逻辑耦合严重,使代码维护变得十分困难. 同时,Vue.js 的接口和语法十分自由,实现同一功能有若干种方法.每个人解决问题的思路不一样,写出来的代码也就不一样,缺乏团队内的规范. 本文旨在从组件开发的不同方面列举出合理的解决方法,作为建立组件规范的一个参考. 构成组件 组件,是一个
-
vue组件与复用详解
一.什么是组件 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码. 二.组件用法 组件需要注册后才可以使用,注册有全局注册和局部注册两种方式. 2.1 全局注册后,任何V ue 实例都可以使用.如: <div id="app1"> <my-component></my-component> </div> Vue.component('my-component',{ templ
-
vue组件historyApiFallback作用详解
本篇博客主要是详细总结一下vue中的historyApiFallback的作用. 当我们在浏览器中输入一个网址(比如说是:http://www.edit.com),此时会经过dns解析,拿到ip地址然后根据ip地址向该服务器发起请求,服务器接受到请求之后,然后返回相应的结果(html,css,js). 如果我们在前端设置了重定向,此时页面会进行跳转到http://www.edit.com/home,在前端会进行匹配对应的组件然后将其渲染到页面上.此时如果我们刷新页面的话,浏览器会发送新的请求ht
-
vue组件生命周期详解
本文实例为大家分享了vue组件生命周期的具体代码,供大家参考,具体内容如下 分为4个阶段: create/mount/update/destroy 每一个阶段都对应着有自己的处理函数 create: beforeCreate created 初始化 mount: beforeMount mounted 和挂载相关的处理 update: beforeUpdate updated 根据要更新的数据 做逻辑判断 destroy:beforeDestroy destroyed 清理工作 代码: <!do
-
Vue 组件注册实例详解
本文实例讲述了Vue 组件注册.分享给大家供大家参考,具体如下: 1 组件名 在注册一个组件的时候,我们始终需要给它一个名字.比如在全局注册的时候我们已经看到了: Vue.component('my-component-name', { /* ... */ }) 该组件名就是 Vue.component 的第一个参数. 你给予组件的名字可能依赖于你打算拿它来做什么.当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候,我们强烈推荐遵循 W3C 规范 中的自定义组件名 (字
-
Vue组件基础用法详解
Vue组件概述 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需,使用不同的组件来拼接页面.这种开发模式使前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦. 在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例 组件是一个自定义元素或称为一个模块,包括所需的模板.逻辑和样式.在HTML模板中,组件以一个自定义标签的形式存在,起到占位符
-
vue 注册组件的使用详解
一.介绍 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树 那么什么是组件呢? 组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素. 二.如何注册组件 Vue.js的组件的使用有3个步骤:创建组件构造器.注册组件和使用组件. 下面用代码演示这三步 <!DOCTYPE html> <html> <body> <div id=&q
-
React为 Vue 引入容器组件和展示组件的教程详解
如果你使用过 Redux 开发 React,你一定听过 容器组件(Smart/Container Components) 或 展示组件(Dumb/Presentational Components),这样划分有什么样的好处,我们能否能借鉴这种划分方式来编写 Vue 代码呢?这篇文章会演示为什么我们应该采取这种模式,以及如何在 Vue 中编写这两种组件. 为什么要使用容器组件? 假如我们要写一个组件来展示评论,在没听过容器组件之前,我们的代码一般都是这样写的: components/Comment
-
vue全局组件与局部组件使用方法详解
vue全局/局部注册,以及一些混淆的组件 main.js入口文件的一些常用配置, 在入口文件上定义的public.vue为全局组件,在这里用的是pug模版 .wraper 的形式相当于<div class=wraper></div> -main.js文件 **main.js入口文件的内容** import Vue from 'vue' import App from './App' import router from './router' // 引入公用组件的vue文件 他暴漏的
-
Vue创建头部组件示例代码详解
Vue.js 组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title
-
vue动态注册组件实例代码详解
写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API,最开始研究它只是用来实现一个tab切换的功能,使用起来也蛮不错的. is 预期:string | Object (组件的选项对象) 用于动态组件且基于 DOM 内模板的限制来工作. 示例: <!-- 当 `currentView` 改变时,组件也跟着改变 --> <component v-bind:is="currentView"></component> 详见vue API中关于