在vue中如何將頁面公用的頭部組件化（詳細教學）

這篇文章主要介紹了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> <p><span>{{message}}</span></p> </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-

上面是我整理給大家的，希望未來會對大家有幫助。

相關文章：

在JavaScript中如何實現圖片變大

在vue vuex axios echarts中如何實作中國地圖

在vue中如何實現樣式之間的切換

#解決輸入框被輸入法遮擋的問題

#在js中如何解決軟鍵盤遮擋輸入框

在Angular2中如何實作元件互動#

以上是在vue中如何將頁面公用的頭部組件化（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！