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 相关文章推荐
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
javascript创建函数的20种方式汇总
Jun 23 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
浅谈使用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
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
jquery 元素相对定位代码
2010/10/15 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
原生js验证简洁注册登录页面
2016/12/17 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
浅谈webpack4 图片处理汇总
2018/09/12 Javascript
Element Input组件分析小结
2018/10/11 Javascript
浅谈js闭包理解
2019/04/01 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
介绍Python的@property装饰器的用法
2015/04/28 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
浅析PEP572: 海象运算符
2019/10/15 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
美国女孩服装购物网站:Justice
2017/03/04 全球购物
Order by的几种用法
2013/06/16 面试题
Ejb技术面试题
2015/04/29 面试题
学年自我鉴定范文
2013/10/01 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
李开复演讲稿
2014/05/24 职场文书
交警失职检讨书
2015/01/26 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
win10清理dns缓存
2022/04/19 数码科技