上篇：VUE從入門到入坑—05.自定義局部|全局組件 / 自定義事件$emit
一、父子組件
1.父組件向子組件傳遞數(shù)據(jù)
(1)$parent方法，在子組件中可以直接訪問該組件的父實(shí)例或組件恬砂。
(2)$root方法，獲取根組件對(duì)象官研。
<div id="app">
<Child1></Child1>
<Child2></Child2>
<Child3></Child3>
</div>
// Child1組件
Vue.component('Child1', {
// 通過(guò)$parent返回的是父組件對(duì)象
template: `
<div class="child1">
<h3>房產(chǎn)信息</h3>
<p>{{$parent.house.address}}</p>
<p>{{$parent.house.size}}</p>
<Childson></Childson>
</div>
`
})
// childSon組件
Vue.component('Childson',{
// $parent獲取父組件對(duì)象秽澳；$root獲取根組件對(duì)象
this.$parent.$parent.house可以直接寫this.$root.house
template:`
<div class="childSon">
<h3>房產(chǎn)信息</h3>
<p>{{$parent.$parent.house.address}}</p>
<p>{{$parent.$parent.house.size}}</p>
<hr>
<p>{{$root.house.address}}</p>
<p>{{$root.house.size}}</p>
</div>
`
})
// Child2組件
Vue.component('Child2', {
template: `
<div class="child2">
<h3>汽車信息</h3>
<p>{{$parent.car.name}}</p>
<p>{{$parent.car.color}}</p>
</div>
`
})
// Child3組件
Vue.component('Child3', {
template: `
<div class="child3">
<h3>存款信息</h3>
<p>{{$parent.money.value}}</p>
<p>{{$parent.money.bank}}</p>
</div>
`
})
// 暫且將#app對(duì)應(yīng)的內(nèi)容當(dāng)成根組件
new Vue({
el: '#app',
data: {
house: {
address: '朝陽(yáng)區(qū)朝陽(yáng)山莊6棟3單元101',
size: '150平'
},
car: {
name: '奔馳S400',
color: '黑色'
},
money: {
value: '150W',
bank: '中國(guó)建設(shè)銀行'
}
}
})
2.子組件向父組件傳遞數(shù)據(jù)
$children：返回的是所有子組件對(duì)象的數(shù)組，再通過(guò)下標(biāo)獲取指定的子組件戏羽。當(dāng)組件順序不會(huì)發(fā)生變化時(shí)担神，用 $children；否則用 $refs始花。注意：$refs：返回的是一個(gè)對(duì)象妄讯，對(duì)象中包含所有帶有ref屬性的子組件。 注意：不是只有組件才可以添加ref屬性酷宵，任何標(biāo)簽都可以加ref屬性 亥贸。
注意：在父組件創(chuàng)建完成到掛載完成之間，包含完整的子組件的生命周期浇垦。父級(jí)組件在mounted生命周期函數(shù)內(nèi)炕置，才能獲取到$children信息；在子組件的created生命周期函數(shù)中，可以獲取到父組件的數(shù)據(jù)朴摊。順序：父級(jí)created => 子級(jí)1created => 子級(jí)2created => => 子級(jí)1mounted => 子級(jí)2mounted => 父級(jí)mounted
<div id="app">
<!-- 給組件標(biāo)簽默垄，添加ref屬性，可以通過(guò)$refs對(duì)象獲取 -->
<Child1 ref="son1"></Child1>
<Child2 ref="son2"></Child2>
<Child3 ref="son3"></Child3>
<div class="son">
<h3>大兒子</h3>
<p>姓名：{{son1.name}}</p>
<p>年齡：{{son1.age}}</p>
</div>
<div class="son">
<h3>二兒子</h3>
<p>姓名：{{son2.name}}</p>
<p>年齡：{{son2.age}}</p>
</div>
<div class="son">
<h3>小兒子</h3>
<p>姓名：{{son3.name}}</p>
<p>年齡：{{son3.age}}</p>
</div>
</div>
// Child1組件
Vue.component('Child1', {
// 通過(guò)$parent返回的是父組件對(duì)象
template:`
<div class="child1">
<h3>房產(chǎn)信息</h3>
<p>{{$parent.house.address}}</p>
<p>{{$parent.house.size}}</p>
<Childson></Childson>
</div>
`,
data() {
return {
name:'張遠(yuǎn)',
age:25
}
}
})
// childSon組件
Vue.component('Childson',{
// $parent獲取父組件對(duì)象
// $root獲取根組件對(duì)象
template:`
<div class="childSon">
<h3>房產(chǎn)信息</h3>
<p>{{$parent.$parent.house.address}}</p>
<p>{{$parent.$parent.house.size}}</p>
<hr>
<p>{{$root.house.address}}</p>
<p>{{$root.house.size}}</p>
</div>
`
})
// Child2組件
Vue.component('Child2', {
template:`
<div class="child2">
<h3>汽車信息</h3>
<p>{{$parent.car.name}}</p>
<p>{{$parent.car.color}}</p>
</div>
`,
data() {
return {
name:'張飛',
age:23
}
}
})
Vue.component('Child3', {
template:`
<div class="child3">
<h3>存款信息</h3>
<p>{{$parent.money.value}}</p>
<p>{{$parent.money.bank}}</p>
</div>
`,
data() {
return {
name:'張強(qiáng)',
age:20
}
}
})
// 暫且將#app對(duì)應(yīng)的內(nèi)容當(dāng)成根組件
new Vue({
el:'#app',
//數(shù)據(jù)
data:{
house:{
address:'名城世家3棟1單元1101室',
size:'150平米'
},
car:{
name:'奔馳S400',
color:'黑色'
},
money:{
value:'150W',
bank:'中國(guó)建設(shè)銀行'
},
//接收子組件的數(shù)據(jù)的對(duì)象
son1:{
name:'',
age:0
},
son2:{
name:'',
age:0
},
son3:{
name:'',
age:0
}
},
mounted() {
// $children返回的是所有子組件對(duì)象的數(shù)組
// 如果頁(yè)面的結(jié)構(gòu)出現(xiàn)了調(diào)整甚纲，這里獲取的具體的組件下標(biāo)就對(duì)不上號(hào)了口锭。
// console.log(this.$children);
/* this.son1.name = this.$children[0].name
this.son1.age = this.$children[0].age
this.son2.name = this.$children[1].name
this.son2.age = this.$children[1].age
this.son3.name = this.$children[2].name
this.son3.age = this.$children[2].age */
// $refs返回的是一個(gè)對(duì)象，對(duì)象中包含所有帶有ref屬性的組件
// console.log(this.$refs);
this.son1.name = this.$refs.son1.name
this.son1.age = this.$refs.son1.age
this.son2.name = this.$refs.son2.name
this.son2.age = this.$refs.son2.age
this.son3.name = this.$refs.son3.name
this.son3.age = this.$refs.son3.age
}
})
二介杆、第三方組件庫(kù)
常用的PC端組件庫(kù)有：element-ui鹃操、 iView 、ant-design vue
常用的移動(dòng)端組件庫(kù)：Vant这溅、Mint-ui
1组民、element-ui組件庫(kù)，引入和使用
注意：第三方組件庫(kù)悲靴，必須在Vue的下面引入
<!-- 引入element-ui樣式 -->
<link rel="stylesheet" >
<!-- 引入Vue -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<!-- 引入組件庫(kù) -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<div>
<!-- 按鈕組件 -->
<el-button type="primary">主要按鈕</el-button>
<!-- 日期時(shí)間選擇器組件 -->
<el-date-picker v-model="date1" type="date" placeholder="選擇日期">
</el-date-picker>
<!-- 表格組件 -->
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
<!-- 分頁(yè)組件 -->
<el-pagination background layout="prev, pager, next" :total="1000">
</el-pagination>
</div>
</div>
new Vue({
el: '#app',
data() {
return {
//獲取時(shí)間
date1: '',
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}],
activeName: 'first'
}
},
})
效果：
2臭胜、iView組件庫(kù)，引入和使用
<!-- 引入Vue -->
<script src="http://vuejs.org/js/vue.min.js"></script>
<!-- 引入iview的樣式 -->
<link rel="stylesheet" >
<!-- 引入iview -->
<script src="http://unpkg.com/view-design/dist/iview.min.js"></script>
注意*：非 template/render 模式下癞尚，一些組件名在實(shí)際使用中需使用 i-小寫組件名 格式（例如 Button組件 需使用 i-button）耸三；一些組件標(biāo)簽名需要改成小寫（例如 Tabs組件 需使用 tabs ）。具體情況參考官網(wǎng)提示浇揩。
<div id="app">
<!-- 按鈕組件 -->
<i-button type="success">Success</i-button>
<!-- Table表格組件 -->
<i-table :columns="columns1" :data="data1"></i-table>
</div>
new Vue({
el: '#app',
data() {
return {
// 標(biāo)題（列名）
columns1: [
{
title: '姓名',
key: 'name'
},
{
title: '年齡',
key: 'age'
},
{
title: '地址',
key: 'address'
},
{
title:'日期',
key:'date'
}
],
// 數(shù)據(jù)
data1: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
]
}
},
})
效果：
3仪壮、Vant組件庫(kù)，引入和使用
<!-- 引入樣式文件 -->
<link rel="stylesheet" />
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
<div id="app">
<!-- 按鈕組件 -->
<van-button type="primary">主要按鈕</van-button>
<!-- 單元格組件 -->
<van-cell-group>
<van-cell title="單元格" value="內(nèi)容" />
<van-cell title="單元格" value="內(nèi)容" label="描述信息" />
</van-cell-group>
<!-- 輸入框組件 -->
<van-cell-group>
<van-field v-model="value" label="文本" placeholder="請(qǐng)輸入用戶名" />
</van-cell-group>
</div>
new Vue({
el: '#app',
data() {
return {
value:'123'
}
},
})
效果：
三胳徽、自定義tabs組件积锅，仿element-ui
<div id="app">
<b-tabs>
<b-tabs-item title="南京">
<img src="https://img1.baidu.com/it/u=1959505243,1682424610&fm=26&fmt=auto" style="width: 100%;" />
</b-tabs-item>
<b-tabs-item title="北京">
<ul>
<li>北京的烤鴨真好吃</li>
<li>北京的烤鴨真好吃</li>
</ul>
</b-tabs-item>
<b-tabs-item title="常州">
<button>常州的鴨脖子真好吃</button>
<button>常州的鴨脖子真好吃</button>
</b-tabs-item>
<b-tabs-item title="無(wú)錫">
<a href="#">無(wú)錫的小籠包真好吃</a>
<a href="#">無(wú)錫的小籠包真好吃</a>
</b-tabs-item>
</b-tabs>
</div>
Vue.component('b-tabs-item', {
// 定義組件的屬性
props:['title'],
// 定義組件的模板
template:`
<li v-show="isShow">
<slot></slot>
</li>
`,
data() {
return {
//是否顯示
isShow:false
}
},
created() {
// 在子組件的created生命周期函數(shù)中，可以獲取到父組件的數(shù)據(jù)
this.$parent.titles.push(this.title)
},
})
// tab組件
Vue.component('b-tabs', {
template:`
<div class="tabs">
<ul class="title">
<li @click="activeIndex=index" :class="{active:activeIndex===index}" v-for="(item,index) in titles" :key="index">{{item}}</li>
</ul>
<ul class="content">
<slot></slot>
</ul>
</div>
`,
data() {
return {
//高亮索引
activeIndex:0,
//定義titles數(shù)組
titles:[]
}
},
watch:{
//監(jiān)聽高亮索引
activeIndex(val){
//先隱藏所有的子組件
this.$children.forEach(c=>c.isShow=false)
//再顯示當(dāng)前高度的子組件
this.$children[val].isShow = true
}
},
// 父組件掛載完成時(shí)养盗，所有的子組件一定全部都掛載完成了
mounted() {
this.$children[this.activeIndex].isShow = true
},
})
new Vue({
el:'#app',
})
