vue 將頁面公用的頭部組件化的方法
更新時間：2017年12月18日 13:48:01 作者：starWind
本篇文章主要介紹了vue 將頁面公用的頭部組件化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了vue 將頁面公用的頭部組件化的方法，分享給大家，具體如下：
呃……重新?lián)炱鹎懊嬗胿ue-cli快速生成的項目。
之前是做過一個多頁面的改造，以及引入vux的ui組件，這次在這個項目的基礎(chǔ)上，再來聊聊vue中的component。
別問我為啥總是寫關(guān)于vue的博客，都是為了生計（………………）
這是官方的文檔地址（https://cn.vuejs.org/v2/guide/components.html#什么是組件？），關(guān)于組件寫了一大堆，一看就知道這個很有用啦。
關(guān)于一些組件的概念之類的就不一一介紹了，官方文檔說的很詳細。
下面進入正題，直接下載項目
一 拿出之前的項目
二 在這種需求下 ，自然就要使用我們的組件了，在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用來傳遞數(shù)據(jù)
//template 一個html結(jié)構(gòu)的模板
需要注意的是：因為在之前項目是用了vue路由，backUrl這個參數(shù)是個可以配置的路由，在實際項目中可以按照自己的需求去配置。
三 在另外兩個demo頁面添加代碼
demo1.vue中添加如下代碼
<header-item message="我是demo1頭部" backUrl="/"></header-item>
demo2.vue中添加如下代碼
<header-item message="我是demo2頭部" backUrl="/"></header-item>
四 最后運行打開網(wǎng)頁可以看到
繼續(xù)甩上之前的項目的github地址 https://github.com/qianyinghuanmie/vue-cli-
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue跳轉(zhuǎn)方式（打開新頁面）及傳參操作,結(jié)合實例形式分析了vue.js跳轉(zhuǎn)實現(xiàn)方式與參數(shù)接受相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
Vue3動態(tài)組件component不生效問題解決方法
動態(tài)組件component是Vue中非常實用的一個功能,它可以根據(jù)條件動態(tài)切換不同的組件,在Vue3中使用方法和Vue2基本一致,在vue3使用component動態(tài)組件展示組件時,組件就是不展示顯示空白,所以本文記錄了Vue3動態(tài)組件component不生效問題解決方法,需要的朋友可以參考下2024-08-08
Vue手把手教你擼一個 beforeEnter 鉤子函數(shù)
這篇文章主要介紹了Vue手把手教你擼一個 beforeEnter 鉤子函數(shù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
Vue.js每天必學(xué)之數(shù)據(jù)雙向綁定
Vue.js每天必學(xué)之數(shù)據(jù)雙向綁定，如何進行綁定，如何進行數(shù)據(jù)雙向綁定，感興趣的小伙伴們可以參考一下2016-09-09
props?和?slot?在?Vue?中的作用略有不同，props?更多地用于父子組件之間的數(shù)據(jù)傳遞，而?slot?則更多地用于組件的復(fù)用和擴展。感興趣的同學(xué)可以參考閱讀2023-04-04
vue+elementui 實現(xiàn)新增和修改共用一個彈框的完整代碼
Element-Ul是餓了么前端團隊推出的一款基于Vue.js 2.0 的桌面端UI框架，手機端有對應(yīng)框架是Mint UI ，今天給大家普及vue+elementui 實現(xiàn)新增和修改共用一個彈框的完整代碼，一起看看吧2021-06-06
在WebStorm中怎么打開一個已有的項目,這個不用多說,那么如何運行一個vue項目呢?下面這篇文章主要給大家介紹了關(guān)于使用WebStorm運行vue項目的相關(guān)資料,需要的朋友可以參考下2023-02-02
本篇文章主要介紹了vue 組件之間使用eventbus傳值。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
本文主要介紹了Vue Cli項目重構(gòu)為Vite的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
在Vue中使用xlsx庫可以幫助我們讀取和寫入Excel文件,下面這篇文章主要給大家介紹了關(guān)于vue中如何使用xlsx讀取excel文件的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12