在現代的Web開發中，組件化已經成為了一種非常流行的開發方式。

m-header是一個基于VueJS框架開發的組件，它旨在為開發人員提供一個簡單而強大的頭部導航欄組件。

m-header是一個高度可定制的組件，在使用時您可以自定義其樣式與布局。同時，它還支持在導航欄中添加圖標、搜索框、下拉菜單等各種功能，并且可以與其他組件配合使用。

<!-- 引入組件 -->
import MHeader from '@/components/MHeader.vue';
Vue.component('MHeader', MHeader);
<!-- 使用組件 -->
<MHeader
:logo="{url: 'https://www.xxx.com/logo.png'}"
:items="[
{title: '首頁', link: '/index'},
{title: '關于我們', link: '/about-us'},
{title: '產品中心', link: '/products', children: [
{title: '產品列表', link: '/product-list'},
{title: '產品詳情', link: '/product-detail'}
]}
]"
:search="true"
/>

如上代碼所示，我們可以通過`import`引入MHeader組件，然后通過Vue.component方法注冊組件。這樣在HTML模板中就可以使用MHeader組件了，通過向組件傳遞參數來實現自定義樣式與功能。

其中，`:logo`參數用于設置導航欄的左側Logo，`:items`參數用于設置導航欄的中間導航按鈕，在該參數中可以使用`children`字段來設置下拉菜單。`search`參數用來控制是否顯示導航欄右側的搜索框。

除此之外，MHeader還提供了一些自定義事件以及插槽，可以幫助開發人員更加靈活地使用該組件。

<template>
<MHeader
:logo="{url: 'https://www.xxx.com/logo.png'}"
:items="[
{title: '首頁', link: '/index'},
{title: '關于我們', link: '/about-us'},
{title: '產品中心', link: '/products', children: [
{title: '產品列表', link: '/product-list'},
{title: '產品詳情', link: '/product-detail'}
]}
]"
:search="true"
@item-click="handleItemClick"
>
<div slot="right">
<button>登錄</button>
<button>注冊</button>
</div>
</MHeader>
</template>
<script>
export default {
methods: {
handleItemClick(item) {
console.log(item);
}
}
}
</script>

如上代碼所示，可以在MHeader組件上使用自定義事件`@item-click`來處理導航按鈕的點擊事件。同時，該組件還提供了一個插槽`slot="right"`，可以讓開發者在導航欄的右側添加任意HTML元素。

綜上所述，MHeader是一個簡單而強大的VueJS組件，它提供了豐富的功能以及自定義選項，可以幫助開發者快速構建漂亮的頭部導航欄。如果您正在尋找一個高度可定制的導航欄組件，那么MHeader就是最佳的選擇。