如需轉(zhuǎn)載請(qǐng)?jiān)u論或簡(jiǎn)信，并注明出處，未經(jīng)允許不得轉(zhuǎn)載
目錄
前言
在一些商業(yè)級(jí)前端項(xiàng)目中，ui和業(yè)務(wù)邏輯往往特別復(fù)雜，所以我們往往會(huì)將一個(gè)復(fù)雜頁(yè)面拆分成多個(gè)“組件”，每個(gè)組件管理各自的業(yè)務(wù)邏輯，本章內(nèi)容將通過(guò)對(duì)上一章ToDoList小工具的組件化改造，從而對(duì)Vue的組件化有一個(gè)初步的認(rèn)識(shí)
上一章節(jié)：從零開(kāi)始學(xué)Vue.js（二）MVVM初探
確定需要拆分的組件
這是我們上一張ToDoList小工具的代碼
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue">
<button v-on:click="onSubmitClick">提交</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
list: [],
inputValue: ''
},
methods: {
onSubmitClick: function () {
this.list.push(this.inputValue)
this.inputValue = ""
}
}
})
</script>
</body>
</html>
運(yùn)行后如下所示
這里，我們可以嘗試對(duì)list進(jìn)行組件化拆分，做成一個(gè)可復(fù)用的組件
進(jìn)行組件化改造（全局組件）
直接上代碼，這里我們定義了一個(gè)全局組件
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue">
<button v-on:click="onSubmitClick">提交</button>
<todo-item v-bind:content="item"
v-for="item in list">
</todo-item>
</div>
<script>
Vue.component('TodoItem', {
props: ['content'],
template: '<li>{{content}}</li>>'
})
var app = new Vue({
el: '#app',
data: {
list: [],
inputValue: ''
},
methods: {
onSubmitClick: function () {
this.list.push(this.inputValue)
this.inputValue = ""
}
}
})
</script>
</body>
</html>
代碼分析：
- 使用
Vue.component('TodoItem',{})聲明一個(gè)組件，使用駝峰法命名，Vue會(huì)自動(dòng)幫我們創(chuàng)建<todo-item/>組件，可以直接在html中使用 - 組件中需要用到的數(shù)據(jù)需要外部傳入，使用
v-bind傳入數(shù)據(jù)，可以傳入多組數(shù)據(jù)，但需要使用不同的命名
<todo-item v-bind:content="item"
v-bind:content1="item"
v-bind:content2="item"
v-for="item in list">
</todo-item>
- 使用
props接收外部傳入的數(shù)據(jù)，命名要與外部傳入的一致，同樣可以接收多組數(shù)據(jù)
props: ['content','content1','content2'],
- 使用
template接收模板代碼
局部組件
上面我們定義的是一個(gè)全局組件，那么我們?nèi)绾蝸?lái)定義一個(gè)局部組件呢？
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue">
<button v-on:click="onSubmitClick">提交</button>
<todo-item v-bind:content="item"
v-for="item in list">
</todo-item>
</div>
<script>
var TodoItem = {
props: ['content','content1','content2'],
template: '<li>{{content}}</li>>'
}
var app = new Vue({
el: '#app',
data: {
list: [],
inputValue: ''
},
methods: {
onSubmitClick: function () {
this.list.push(this.inputValue)
this.inputValue = ""
}
}
})
</script>
</body>
</html>
我們使用var TodoItem = {)來(lái)聲明一個(gè)局部組件，運(yùn)行代碼，結(jié)果報(bào)錯(cuò)了
也就是說(shuō)我們的組件沒(méi)有被注冊(cè)，局部組件需要在Vue實(shí)例中使用components字段進(jìn)行注冊(cè)
var app = new Vue({
el: '#app',
components: {
TodoItem: TodoItem
},
//其他不變的代碼省略
.....
})
總結(jié)
其實(shí)不管是全局組件還是局部組件，Vue的底層都會(huì)把組件編譯成一個(gè)Vue的實(shí)例，我們可以說(shuō)一個(gè)Vue項(xiàng)目是由很多組件組成的，也可以說(shuō)是由很多Vue實(shí)例組成的。本章主要是帶大家簡(jiǎn)單的入門(mén)一下組件的概念，學(xué)習(xí)一下如何創(chuàng)建全局組件和局部組件，后續(xù)章節(jié)中還會(huì)進(jìn)行更加深入的進(jìn)行組件化實(shí)戰(zhàn)
