一、父子组件传值
（1）父传子
$parent：可以获取父组件的实例，还可以继续获取它的父级组件。
$root：获取根组件对象。(例如：this.$parent.$parent.house可以直接写this.$root.house)
<div id="app">
<Child1></Child1>
<Child2></Child2>
<Child3></Child3>
</div>
// Child1组件
Vue.component('Child1', {
// 通过$parent返回的是父组件对象
template: `
<div class="child1">
<h3>房产信息</h3>
<p>{{$parent.house.address}}</p>
<p>{{$parent.house.size}}</p>
<Childson></Childson>
</div>
`
})
// childSon组件
Vue.component('Childson',{
// $parent获取父组件对象；$root获取根组件对象
template:`
<div class="childSon">
<h3>房产信息</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对应的内容当成根组件
new Vue({
el: '#app',
data: {
house: {
address: '朝阳区朝阳山庄6栋3单元101',
size: '150平'
},
car: {
name: '奔驰S400',
color: '黑色'
},
money: {
value: '150W',
bank: '中国建设银行'
}
}
})
（2）子传父
$children：返回的是所有子组件对象的数组，再通过下标获取指定的子组件。当组件顺序不会发生变化时，用$children；否则用$refs。注意：
$refs：返回的是一个对象，对象中包含所有带有ref属性的子组件。 注意：不是只有组件才可以添加ref属性，任何标签都可以加ref属性 。
注意：在父组件创建完成到挂载完成之间，包含完整的子组件的生命周期。父级组件在mounted生命周期函数内，才能获取到$children信息；在子组件的created生命周期函数中，可以获取到父组件的数据。顺序：父级created => 子级1created => 子级2created => => 子级1mounted => 子级2mounted => 父级mounted
<div id="app">
<!-- 给组件标签，添加ref属性，可以通过$refs对象获取 -->
<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', {
// 通过$parent返回的是父组件对象
template:`
<div class="child1">
<h3>房产信息</h3>
<p>{{$parent.house.address}}</p>
<p>{{$parent.house.size}}</p>
<Childson></Childson>
</div>
`,
data() {
return {
name:'张远',
age:25
}
}
})
// childSon组件
Vue.component('Childson',{
// $parent获取父组件对象
// $root获取根组件对象
template:`
<div class="childSon">
<h3>房产信息</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:'张强',
age:20
}
}
})
// 暂且将#app对应的内容当成根组件
new Vue({
el:'#app',
//数据
data:{
house:{
address:'名城世家3栋1单元1101室',
size:'150平米'
},
car:{
name:'奔驰S400',
color:'黑色'
},
money:{
value:'150W',
bank:'中国建设银行'
},
//接收子组件的数据的对象
son1:{
name:'',
age:0
},
son2:{
name:'',
age:0
},
son3:{
name:'',
age:0
}
},
mounted() {
// $children返回的是所有子组件对象的数组
// 如果页面的结构出现了调整，这里获取的具体的组件下标就对不上号了。
// 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返回的是一个对象，对象中包含所有带有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
}
})
二、第三方组件库
PC端开发：element-ui组件库、iView组件库、ant-design vue组件库
移动端开发：Vant组件库
1、element-ui组件库
（1）引入组件库
注意：第三方组件库，必须在Vue的下面引入
<!-- 引入element-ui样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入Vue -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
（2）组件的使用
在组件库中选取组件，复制对应代码即可使用。
<div id="app">
<div>
<!-- 按钮组件 -->
<el-button type="primary">主要按钮</el-button>
<!-- 日期时间选择器组件 -->
<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>
<!-- 分页组件 -->
<el-pagination background layout="prev, pager, next" :total="1000">
</el-pagination>
</div>
</div>
new Vue({
el: '#app',
data() {
return {
//获取时间
date1: '',
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
activeName: 'first'
}
},
})
效果：
2、iView组件库
（1）引入组件库
<!-- 引入Vue -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- 引入iview的样式 -->
<link rel="stylesheet" href="//unpkg.com/view-design/dist/styles/iview.css">
<!-- 引入iview -->
<script src="//unpkg.com/view-design/dist/iview.min.js"></script>
（2）组件的使用
注意：非 template/render 模式下，一些组件名在实际使用中需使用 i-小写组件名 格式（例如 Button组件 需使用 i-button）；一些组件标签名需要改成小写（例如 Tabs组件 需使用 tabs ）。具体情况参考官网提示。
<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 {
// 标题（列名）
columns1: [
{
title: '姓名',
key: 'name'
},
{
title: '年龄',
key: 'age'
},
{
title: '地址',
key: 'address'
},
{
title:'日期',
key:'date'
}
],
// 数据
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组件库
（1）引入组件库
<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
<!-- 引入 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>
（2）组件的使用
<div id="app">
<!-- 按钮组件 -->
<van-button type="primary">主要按钮</van-button>
<!-- 单元格组件 -->
<van-cell-group>
<van-cell title="单元格" value="内容" />
<van-cell title="单元格" value="内容" label="描述信息" />
</van-cell-group>
<!-- 输入框组件 -->
<van-cell-group>
<van-field v-model="value" label="文本" placeholder="请输入用户名" />
</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="无锡">
<a href="#">无锡的小笼包真好吃</a>
<a href="#">无锡的小笼包真好吃</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生命周期函数中，可以获取到父组件的数据
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数组
titles:[]
}
},
watch:{
//监听高亮索引
activeIndex(val){
//先隐藏所有的子组件
this.$children.forEach(c=>c.isShow=false)
//再显示当前高度的子组件
this.$children[val].isShow = true
}
},
// 父组件挂载完成时，所有的子组件一定全部都挂载完成了
mounted() {
this.$children[this.activeIndex].isShow = true
},
})
new Vue({
el:'#app',
})
效果：
四、自定义表格组件--仿iview
<div id="app">
<d-table :columns="columns1" :data="data1"></d-table>
</div>
Vue.component('d-table', {
template:`
<table>
<thead>
<tr>
<th v-for="(item, index) in columns" :key="index">{{item.title}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in data" :key="index">
<td v-for="(item2,index2) in columns" :key="index2">{{item[item2.key]}}</td>
</tr>
</tbody>
</table>
`,
props:['columns','data']
})
new Vue({
el: '#app',
data: {
columns1: [
{
title: '姓名',
key: 'name'
},
{
title: '年龄',
key: 'age'
},
{
title: '地址',
key: 'address'
},
{
title: '日期',
key: 'date'
}
],
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'
}
]
}
})
效果：
