当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue 将页面公用的头部组件化的方法

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

2018年02月22日  | 移动技术网IT编程  | 我要评论

伟哥有效果吗,3d蓝精灵,瑞星杀毒软件2006

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

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

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

别问我为啥总是写关于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>

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

继续甩上之前的项目的github地址   -

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网