學(xué)習(xí)完整課程請移步 互聯(lián)網(wǎng) Java 全棧工程師
本節(jié)視頻
什么是組件
組件是可復(fù)用的 Vue 實例唾戚，說白了就是一組可以重復(fù)使用的模板，跟 JSTL 的自定義標(biāo)簽监婶、Thymeleaf 的 th:fragment 以及 Sitemesh3 框架有著異曲同工之妙芬骄。通常一個應(yīng)用會以一棵嵌套的組件樹的形式來組織：
例如泌射，你可能會有頁頭种呐、側(cè)邊欄拂蝎、內(nèi)容區(qū)等組件可缚，每個組件又包含了其它的像導(dǎo)航鏈接霎迫、博文之類的組件。
第一個 Vue 組件
注意：在實際開發(fā)中帘靡，我們并不會用以下方式開發(fā)組件知给，而是采用 vue-cli 創(chuàng)建 .vue 模板文件的方式開發(fā)，以下方法只是為了讓大家理解什么是組件描姚。
使用 Vue.component() 方法注冊組件
JavaScript
<script type="text/javascript">
// 先注冊組件
Vue.component('my-component-li', {
template: '<li>Hello li</li>'
});
// 再實例化 Vue
var vm = new Vue({
el: '#vue'
});
</script>
HTML
<div id="vue">
<ul>
<my-component-li></my-component-li>
</ul>
</div>
說明
-
Vue.component()：注冊組件 -
my-component-li：自定義組件的名字 -
template：組件的模板
測試效果
使用 props 屬性傳遞參數(shù)
像上面那樣用組件沒有任何意義涩赢，所以我們是需要傳遞參數(shù)到組件的，此時就需要使用 props 屬性了
JavaScript
<script type="text/javascript">
// 先注冊組件
Vue.component('my-component-li', {
props: ['item'],
template: '<li>Hello {{item}}</li>'
});
// 再實例化 Vue
var vm = new Vue({
el: '#vue',
data: {
items: ["張三", "李四", "王五"]
}
});
</script>
HTML
<div id="vue">
<ul>
<my-component-li v-for="item in items" v-bind:item="item"></my-component-li>
</ul>
</div>
說明
-
v-for="item in items"：遍歷 Vue 實例中定義的名為items的數(shù)組轩勘，并創(chuàng)建同等數(shù)量的組件 -
v-bind:item="item"：將遍歷的item項綁定到組件中props定義的名為item屬性上筒扒；=號左邊的item為props定義的屬性名，右邊的為item in items中遍歷的item項的值
測試效果
完整的 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>布局篇 組件基礎(chǔ)</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="vue">
<ul>
<my-component-li v-for="item in items" v-bind:item="item"></my-component-li>
</ul>
</div>
<script type="text/javascript">
// 先注冊組件
Vue.component('my-component-li', {
props: ['item'],
template: '<li>Hello {{item}}</li>'
});
// 再實例化 Vue
var vm = new Vue({
el: '#vue',
data: {
items: ["張三", "李四", "王五"]
}
});
</script>
</body>
</html>
