vue 将页面公用的头部组件化的方法


Posted in Javascript onDecember 18, 2017

本文介绍了vue 将页面公用的头部组件化的方法,分享给大家,具体如下:

呃……重新捡起前面用vue-cli快速生成的项目。

之前是做过一个多页面的改造,以及引入vux的ui组件,这次在这个项目的基础上,再来聊聊vue中的component。

别问我为啥总是写关于vue的博客,都是为了生计(………………)

这是官方的文档地址(https://cn.vuejs.org/v2/guide/components.html#什么是组件?),关于组件写了一大堆,一看就知道这个很有用啦。

关于一些组件的概念之类的就不一一介绍了,官方文档说的很详细。

下面进入正题,直接下载项目

一 拿出之前的项目

vue 将页面公用的头部组件化的方法

二 在这种需求下 ,自然就要使用我们的组件了,在index.js中添加如下代码。

Vue.component('header-item', {
 props: ['message', 'backUrl'],
 template: `<header class="evaluate-header"><router-link :to="backUrl"><span><i class="iconfont"></i></span></router-link> <div><span>{{message}}</span></div> </header>`
})
// props用来传递数据
//template 一个html结构的模板

需要注意的是:因为在之前项目是用了vue路由,backUrl这个参数是个可以配置的路由,在实际项目中可以按照自己的需求去配置。

三  在另外两个demo页面添加代码

demo1.vue中添加如下代码

<header-item message="我是demo1头部" backUrl="/"></header-item>

demo2.vue中添加如下代码

<header-item message="我是demo2头部" backUrl="/"></header-item>

四 最后运行打开网页可以看到

vue 将页面公用的头部组件化的方法

继续甩上之前的项目的github地址   https://github.com/qianyinghuanmie/vue-cli-

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
js实现精确到秒的倒计时效果
May 29 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
Jun 08 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
浅谈使用React.setState需要注意的三点
Dec 18 #Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 #Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 #Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 #Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 #Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 #Javascript
javaScript中的空值和假值
Dec 18 #Javascript
You might like
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
window.onload使用指南
2015/09/13 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
js实现全选和全不选
2020/07/28 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
用Python实现换行符转换的脚本的教程
2015/04/16 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
python 搜索大文件的实例代码
2019/07/08 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
Python range与enumerate函数区别解析
2020/02/28 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
审计专业自荐信范文
2014/04/21 职场文书
党员服务承诺书
2014/05/28 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
关于安全的广播稿
2014/10/23 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书