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)文章
在大型項目中，我們可能需要拆分應(yīng)用為更小的塊，并僅在需要時再從服務(wù)器加載相關(guān)組件。Vue 提供了defineAsyncComponent 方法來實現(xiàn)此功能,需要的朋友可以參考下2023-04-04
Vue3 構(gòu)建 Web Components使用詳解
這篇文章主要為大家介紹了Vue3 構(gòu)建 Web Components使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
本文通過實例代碼給大家介紹了vue 下列表側(cè)滑操作,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
vue實現(xiàn)導(dǎo)出excel的多種方式總結(jié)
在Vue中實現(xiàn)導(dǎo)出Excel有多種方式,可以通過前端實現(xiàn),也可以通過前后端配合實現(xiàn),這篇文章將為大家詳細介紹幾種常用的實現(xiàn)方式,需要的可以參考下2023-08-08
在前端開發(fā)中，如果需要模擬后端數(shù)據(jù)，而又不想開發(fā)一個后端服務(wù)器， 則可以借助mock.js配置一個后端服務(wù)器來返回前端需要的數(shù)據(jù)，本文將會分別介紹在Quasar項目和Vite項目中Mock服務(wù)器的配置方法2022-12-12
這篇文章主要給大家介紹了基于Vue3+Ts實現(xiàn)父子組件間傳值的兩種方式,使用v-model+emit傳值和使用v-bind+emit傳值兩種方式,文章通過代碼示例介紹的非常詳細,感興趣的同學(xué)可以參考閱讀2023-09-09
本篇文章主要介紹了詳解Vue雙向數(shù)據(jù)綁定原理解析 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vue對枚舉值轉(zhuǎn)換方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
在現(xiàn)代Web應(yīng)用中,用戶登錄功能是一個核心模塊,它不僅涉及到用戶身份驗證,還需要處理表單驗證、狀態(tài)管理、接口調(diào)用等多個環(huán)節(jié),本文將基于一個Vue.js項目中的登錄功能實現(xiàn),深入解析其背后的技術(shù)細節(jié),幫助開發(fā)者更好地理解和實現(xiàn)類似功能,需要的朋友可以參考下2025-02-02
vue2.0 實現(xiàn)導(dǎo)航守衛(wèi)的具體用法（路由守衛(wèi)）
這篇文章主要介紹了vue2.0 實現(xiàn)導(dǎo)航守衛(wèi)的具體用法（路由守衛(wèi)），vue-route 提供的 beforeRouteUpdate 可以方便地實現(xiàn)導(dǎo)航守衛(wèi)（navigation-guards），具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05