vue组件（将页面公用的头部组件化）

时间 2019-12-02

标签 vue 组件页面公用头部繁體版

原文原文链接

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

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

别问我为啥老是写关于vue的博客，都是为了生计（………………）git

这是官方的文档地址（https://cn.vuejs.org/v2/guide/components.html#什么是组件？），关于组件写了一大堆，一看就知道这个颇有用啦。github

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

下面进入正题，直接下载项目ide

一拿出以前的项目ui

二在这种需求下，天然就要使用咱们的组件了，在index.js中添加以下代码。lua

Vue.component('header-item', {
  props: ['message', 'backUrl'],
  template: `<header class="evaluate-header"><router-link :to="backUrl"><span><i class="iconfont">&#xe697;</i></span></router-link> <div><span>{{message}}</span></div> </header>`
})
// props用来传递数据

//template 一个html结构的模板

须要注意的是：由于在以前项目是用了vue路由，backUrl这个参数是个能够配置的路由，在实际项目中能够按照本身的需求去配置。spa

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

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-