vue的component思想允許我們復(fù)用UI組件笔时，減少功能重復(fù)的代碼义黎。通過對(duì)html和樣式文件以及js文件的封裝咖城，使其成為一個(gè)具有獨(dú)立功能的小插件硬鞍；用戶可以通過自定義的標(biāo)簽調(diào)用這個(gè)插件。
本文簡(jiǎn)單介紹component的基本用法酷勺，結(jié)合在開發(fā)過程中的具體應(yīng)用場(chǎng)景進(jìn)一步舉例說明本橙，方便大家理解。
正文開始：
使用自定義的component脆诉，首先需要?jiǎng)?chuàng)建一個(gè)component甚亭，并且將其注冊(cè)到Vue的作用域中，之后击胜，我們就可以使用自定義的組件了亏狰。
//component 聲明與注冊(cè)
Vue.component('my-component', {
template:'<div>Hello vue component!</div>'
})
// 創(chuàng)建根實(shí)例
newVue({
el:'#app'
})
注冊(cè)之后，我們可以在html中使用自定義的component了：
<div id="#app">
<my-component></my-component>
注意：組件命名的方式偶摔，在js和html中的轉(zhuǎn)換暇唾。
渲染后的結(jié)果為：
<div id = "#app">
<div>
Hello vue component!
</div>
</div>
以上是對(duì)靜態(tài)資源的封裝；而通常使用component的情例如景是將動(dòng)態(tài)的數(shù)據(jù)辰斋，與html模板進(jìn)行封裝策州，形成一個(gè)獨(dú)立并且可復(fù)用的組件。例如菜單欄宫仗，表格插件抽活，分頁插件。下面以常見的菜單欄進(jìn)行說明：
這個(gè)菜單組件需要滿足以下幾點(diǎn)要求：
1锰什、用戶可以使用
vue-menu標(biāo)簽調(diào)用該組件
2下硕、菜單中的目錄內(nèi)容是動(dòng)態(tài)渲染的
既然需要?jiǎng)討B(tài)渲染子目錄，需要開發(fā)人員定義渲染的數(shù)據(jù)汁胆，因此梭姓，采用props進(jìn)行“父組件”向“子組件”的消息傳輸。
首先先要明白父組件與子組件的含義：在component中嫩码，自定義標(biāo)簽稱為父標(biāo)簽誉尖，而封裝其中的html稱為子標(biāo)簽。因此铸题，可以說props完成數(shù)據(jù)從封裝好的外部組件向內(nèi)部html滲入的過程铡恕。
先上代碼：
menu.vue
<template>
<div class="ui vertical inverted sticky menu fixed top" id="menu">
<template v-for="item in menu">
<router-link :to="item.link" class="item">{{item.name}}</router-link>
</template>
</div>
</template>
<script>
export default{
name:"vueMenu",
props:["menu"],
}
</script>
main.vue
<template>
<div class="wrapper">
<vue-menu :menu="menu"></vue-menu>
</div>
</template>
<script>
import vueMenu from "../../components/menu.vue"
export default{
name:"App",
components: {
vueMenu
},
data(){
return{
menu:[
{name:"系統(tǒng)管理",link:"sys"}
{name:"系統(tǒng)管理",link:"sys"}
{name:"系統(tǒng)管理",link:"sys"}
]
}
}
}
</script>
