vue 将页面公用的头部组件化的方法
更新时间：2017年12月18日 13:48:01 作者：starWind
本篇文章主要介绍了vue 将页面公用的头部组件化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本文介绍了vue 将页面公用的头部组件化的方法，分享给大家，具体如下：
呃……重新捡起前面用vue-cli快速生成的项目。
之前是做过一个多页面的改造，以及引入vux的ui组件，这次在这个项目的基础上，再来聊聊vue中的component。
别问我为啥总是写关于vue的博客，都是为了生计（………………）
这是官方的文档地址（https://cn.vuejs.org/v2/guide/components.html#什么是组件？），关于组件写了一大堆，一看就知道这个很有用啦。
关于一些组件的概念之类的就不一一介绍了，官方文档说的很详细。
下面进入正题，直接下载项目
一 拿出之前的项目
二 在这种需求下 ，自然就要使用我们的组件了，在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地址 https://github.com/qianyinghuanmie/vue-cli-
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。Vue 提供了defineAsyncComponent 方法来实现此功能,需要的朋友可以参考下2023-04-04
这篇文章主要为大家介绍了Vue3 构建 Web Components使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
本文通过实例代码给大家介绍了vue 下列表侧滑操作,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
在Vue中实现导出Excel有多种方式,可以通过前端实现,也可以通过前后端配合实现,这篇文章将为大家详细介绍几种常用的实现方式,需要的可以参考下2023-08-08
在前端开发中，如果需要模拟后端数据，而又不想开发一个后端服务器， 则可以借助mock.js配置一个后端服务器来返回前端需要的数据，本文将会分别介绍在Quasar项目和Vite项目中Mock服务器的配置方法2022-12-12
这篇文章主要给大家介绍了基于Vue3+Ts实现父子组件间传值的两种方式,使用v-model+emit传值和使用v-bind+emit传值两种方式,文章通过代码示例介绍的非常详细,感兴趣的同学可以参考阅读2023-09-09
本篇文章主要介绍了详解Vue双向数据绑定原理解析 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了vue对枚举值转换方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
在现代Web应用中,用户登录功能是一个核心模块,它不仅涉及到用户身份验证,还需要处理表单验证、状态管理、接口调用等多个环节,本文将基于一个Vue.js项目中的登录功能实现,深入解析其背后的技术细节,帮助开发者更好地理解和实现类似功能,需要的朋友可以参考下2025-02-02
这篇文章主要介绍了vue2.0 实现导航守卫的具体用法（路由守卫），vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫（navigation-guards），具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-05-05
最新评论