vue.js初學(xué)入門教程（2）
接著上一篇vue慢速入門教程學(xué)習(xí)。
4.組件使用基礎(chǔ)
什么是組件？組件可以理解為可重用的自定義HTML。
可以使用一堆組件來(lái)構(gòu)造大型應(yīng)用，任意類型的應(yīng)用界面都可以抽象為一個(gè)組件樹(shù)：
可以把組件代碼按照template、style、script的拆分方式，放置到對(duì)應(yīng)的.vue文件中。
組件預(yù)定義選項(xiàng)中最核心的幾個(gè)：
模板（template）、初始數(shù)據(jù)（data）、接受的外部參數(shù)（props）、方法（methods）、生命周期鉤子函數(shù)（lifecycle hooks）。
4.1 基本步驟
使用組件首先需要?jiǎng)?chuàng)建構(gòu)造器：
var MyComponent = Vue.extend({
// 選項(xiàng)...
})
要把這個(gè)構(gòu)造器用作組件，需要用 Vue.component(tag, constructor) 注冊(cè) ：
// 全局注冊(cè)組件，tag 為 my-component
Vue.component('my-component', MyComponent)
然后使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="xxx">
<my-component></my-component>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var myComponent = Vue.extend({
template: '<p>9898不得了！</p>'
});
Vue.component('my-component', myComponent);
new Vue({
el: '#xxx'
});
</script>
</html>
其中，
Vue.component('my-component', MyComponent)這種是全局注冊(cè)，第一個(gè)參數(shù)是注冊(cè)組件的名稱，第二個(gè)參數(shù)是組件的構(gòu)造函數(shù)；
選項(xiàng)對(duì)象的template屬性用于定義組件要渲染的HTML；
組件的模板替換了自定義元素，自定義元素的作用只是作為一個(gè)掛載點(diǎn)。組件掛載在vue實(shí)例上才會(huì)生效。
對(duì)于自定義標(biāo)簽名字，Vue.js 不強(qiáng)制要求遵循 W3C 規(guī)則（小寫(xiě)，并且包含一個(gè)短杠），為了避免不必要的事端盡管遵循這個(gè)規(guī)則。
4.2 局部注冊(cè)
用實(shí)例選項(xiàng) components 注冊(cè)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="xxx">
<my-component></my-component>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var myComponent = Vue.extend({
template: '<p>9898不得了！</p>'
});
// Vue.component('my-component', myComponent);
new Vue({
el: '#xxx',
components: {
'my-component': myComponent
}
});
</script>
</html>
也可以在組件中定義并使用其他組件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="example">
<xx-component></xx-component>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var Child = Vue.extend({
template: '<div>i am zai</div>',
replace: true
})
var Parent = Vue.extend({
template: '<p>i am baba</p><br/><wa></wa>',
components: {
// <xx-component>只能用在父組件模板內(nèi)
'wa': Child
}
})
// 創(chuàng)建根實(shí)例
new Vue({
el: '#example',
components: {
'xx-component': Parent
}
})
</script>
</html>
其中，子組件只能在父組件的template中使用。
另外，有簡(jiǎn)化的寫(xiě)法，Vue在背后會(huì)自動(dòng)地調(diào)用Vue.extend()：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="xxx">
<my-component-continue></my-component-continue>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 局部注冊(cè)的簡(jiǎn)化寫(xiě)法
var vm2 = new Vue({
el: '#xxx',
components: {
'my-component': {
template: '<div>9898不得了！</div>'
},
'my-component-continue': {
template: '<div>糧食大豐收！</div>'
}
}
})
</script>
</html>
4.3 組件選項(xiàng)問(wèn)題
在定義組件的選項(xiàng)時(shí)，data和el選項(xiàng)必須使用函數(shù)。
如果data選項(xiàng)指向某個(gè)對(duì)象，這意味著所有的組件實(shí)例共用一個(gè)data。
所以應(yīng)當(dāng)使用一個(gè)函數(shù)作為 data 選項(xiàng)，讓這個(gè)函數(shù)返回一個(gè)新對(duì)象：
Vue.component('my-component', {
data: function(){
return {a : 1}
}
})
同理，el 選項(xiàng)用在 Vue.extend() 中時(shí)也須是一個(gè)函數(shù)。
5.數(shù)據(jù)傳遞
Vue.js組件之間有三種數(shù)據(jù)傳遞方式：
props
組件通信
slot
5.1 props
“props”是組件數(shù)據(jù)的一個(gè)字段，期望從父組件傳下來(lái)數(shù)據(jù)。因?yàn)榻M件實(shí)例的作用域是孤立的，所以子組件需要顯式地用props選項(xiàng)來(lái)獲取父組件的數(shù)據(jù)。
Props選項(xiàng)可以是字面量、表達(dá)式、綁定修飾符。
5.1.1 字面量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<child msg="hello!"></child>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
Vue.component('child', {
// 聲明 props
props: ['msg'],
// prop 可以用在模板內(nèi)
// 可以用 `this.msg` 設(shè)置
template: '<span>{{ msg }}你困嗎</span>'
})
new Vue({
el: 'body'
})
</script>
</body>
</html>
HTML 特性不區(qū)分大小寫(xiě)。名字形式為 camelCase 的 prop 用作特性時(shí)，需要轉(zhuǎn)為 kebab-case（短橫線隔開(kāi)）：
Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>
5.1.2 動(dòng)態(tài)
類似于用 v-bind 綁定 HTML 特性到一個(gè)表達(dá)式，也可以用 v-bind 綁定動(dòng)態(tài) Props 到父組件的數(shù)據(jù)。每當(dāng)父組件的數(shù)據(jù)變化時(shí)，也會(huì)傳導(dǎo)給子組件。比如醬：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<input v-model="parentMsg">
<br>
<child :my-message="parentMsg"></child>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
Vue.component('child', {
props: ['myMessage'],
template: '<span>{{ myMessage }}你困嗎</span>'
})
new Vue({
el: 'body',
data:{
parentMsg:''
}
})
</script>
</body>
</html>
當(dāng)我在input里面輸入哈哈的時(shí)候：
5.1.3 綁定類型
可以使用綁定修飾符：
.sync，雙向綁定
.once，單次綁定
<!-- 默認(rèn)為單向綁定 --> <child :msg="parentMsg"></child> <!-- 雙向綁定 --> <child :msg.sync="parentMsg"></child> <!-- 單次綁定 --> <child :msg.once="parentMsg"></child>
prop 默認(rèn)是單向綁定：當(dāng)父組件的屬性變化時(shí)，將傳導(dǎo)給子組件，但是反過(guò)來(lái)不會(huì)。
不過(guò)需要注意的是：如果 prop 是一個(gè)對(duì)象或數(shù)組，是按引用傳遞。在子組件內(nèi)修改它會(huì)影響父組件的狀態(tài)，不管是使用哪種綁定類型。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<table>
<tr>
<th colspan="3">父組件數(shù)據(jù)</td>
</tr>
<tr>
<td>name</td>
<td>{{ name }}</td>
<td><input type="text" v-model="name" /></td>
</tr>
<tr>
<td>age</td>
<td>{{ age }}</td>
<td><input type="text" v-model="age" /></td>
</tr>
</table>
<my-component v-bind:my-name.sync="name" v-bind:my-age="age"></my-component>
</div>
<template id="myComponent">
<table>
<tr>
<th colspan="3">子組件數(shù)據(jù)</td>
</tr>
<tr>
<td>my name</td>
<td>{{ myName }}</td>
<td><input type="text" v-model="myName" /></td>
</tr>
<tr>
<td>my age</td>
<td>{{ myAge }}</td>
<td><input type="text" v-model="myAge" /></td>
</tr>
</table>
</template>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'k',
age: 24
},
components: {
'my-component': {
template: '#myComponent',
props: ['myName', 'myAge']
}
}
})
</script>
</body>
</html>
上面這段設(shè)置了名字雙向，年齡單向：
以下是一個(gè)大神的綜合示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<table>
<tr>
<th colspan="3">父組件數(shù)據(jù)</td>
</tr>
<tr>
<td>name</td>
<td>{{ name }}</td>
<td><input type="text" v-model="name" /></td>
</tr>
<tr>
<td>age</td>
<td>{{ age }}</td>
<td><input type="text" v-model="age" /></td>
</tr>
</table>
<my-component v-bind:my-name.sync="name" v-bind:my-age="age"></my-component>
</div>
<template id="myComponent">
<table>
<tr>
<th colspan="3">子組件數(shù)據(jù)</td>
</tr>
<tr>
<td>my name</td>
<td>{{ myName }}</td>
<td><input type="text" v-model="myName" /></td>
</tr>
<tr>
<td>my age</td>
<td>{{ myAge }}</td>
<td><input type="text" v-model="myAge" /></td>
</tr>
</table>
</template>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'k',
age: 24
},
components: {
'my-component': {
template: '#myComponent',
props: ['myName', 'myAge']
}
}
})
</script>
</body>
</html>
可以檢索：
其中，{{ col | capitalize}}過(guò)濾，首字母大寫(xiě)。
<tr v-for="entry in data | filterBy filterKey">
<td v-for="col in columns">
{{entry[col]}}
</td>
</tr>
過(guò)濾搜索關(guān)鍵詞；
雙循環(huán)，tr循環(huán)data條數(shù)，4行，entry表示每行；td循環(huán)columns數(shù)量，3列，col表示每列，entry[col]取具體數(shù)據(jù)。
props: {
data: Array,
columns: Array,
filterKey: String
}
驗(yàn)證：父組件傳遞過(guò)來(lái)的data和columns必須是Array類型，filterKey必須是字符串類型。
驗(yàn)證要求示例：
Vue.component('example', {
props: {
// 基礎(chǔ)類型檢測(cè) （`null` 意思是任何類型都可以）
propA: Number,
// 多種類型 (1.0.21+)
propM: [String, Number],
// 必需且是字符串
propB: {
type: String,
required: true
},
// 數(shù)字，有默認(rèn)值
propC: {
type: Number,
default: 100
},
// 對(duì)象/數(shù)組的默認(rèn)值應(yīng)當(dāng)由一個(gè)函數(shù)返回
propD: {
type: Object,
default: function () {
return { msg: 'hello' }
}
},
// 指定這個(gè) prop 為雙向綁定
// 如果綁定類型不對(duì)將拋出一條警告
propE: {
twoWay: true
},
// 自定義驗(yàn)證函數(shù)
propF: {
validator: function (value) {
return value > 10
}
},
// 轉(zhuǎn)換函數(shù)（1.0.12 新增）
// 在設(shè)置值之前轉(zhuǎn)換值
propG: {
coerce: function (val) {
return val + '' // 將值轉(zhuǎn)換為字符串
}
},
propH: {
coerce: function (val) {
return JSON.parse(val) // 將 JSON 字符串轉(zhuǎn)換為對(duì)象
}
}
}
})
Stringtype 可以是下面原生構(gòu)造器：
Number
Boolean
Function
Object
Array
type 也可以是一個(gè)自定義構(gòu)造器，使用 instanceof 檢測(cè)。
當(dāng) prop 驗(yàn)證失敗時(shí)，Vue 將拒絕在子組件上設(shè)置此值，如果使用的是開(kāi)發(fā)版本會(huì)拋出一條警告。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
《vue.js權(quán)威指南》
相關(guān)文章
vue進(jìn)行圖片的預(yù)加載watch用法實(shí)例講解
下面小編就為大家分享一篇vue進(jìn)行圖片的預(yù)加載watch用法實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue項(xiàng)目中在外部js文件中直接調(diào)用vue實(shí)例的方法比如說(shuō)this
這篇文章主要介紹了vue項(xiàng)目中在外部js文件中直接調(diào)用vue實(shí)例的方法比如說(shuō)this,需要的朋友可以參考下2019-04-04
springboot?vue測(cè)試平臺(tái)前端項(xiàng)目查詢新增功能
這篇文章主要為大家介紹了springboot+vue測(cè)試平臺(tái)前端項(xiàng)目實(shí)現(xiàn)查詢新增功能，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
這篇文章主要介紹了Vue中的混入的使用(vue mixins)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
這篇文章主要介紹了vant 中van-list的用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue3中el-uplod結(jié)合ts實(shí)現(xiàn)圖片粘貼上傳
本文主要介紹了vue3中el-uplod結(jié)合ts實(shí)現(xiàn)圖片粘貼上傳,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07
Vite創(chuàng)建Vue3項(xiàng)目及Vue3使用jsx詳解
vite是新一代的前端構(gòu)建工具,下面這篇文章主要給大家介紹了關(guān)于Vite創(chuàng)建Vue3項(xiàng)目以及Vue3使用jsx的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue組件中修改組件外元素樣式,本文給大家分享兩種解決方案幫助大家解決這樣的問(wèn)題，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue在頁(yè)面中如何使用window全局變量問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue兩組件間值傳遞 $router.push實(shí)現(xiàn)方法
兩組件間傳值，可能包含多種情況，這篇文章主要介紹了vue兩組件間值傳遞 $router.push實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05