上篇：VUE从入门到入坑—05.自定义局部|全局组件 / 自定义事件$emit
一、父子组件
1.父组件向子组件传递数据
(1)$parent方法，在子组件中可以直接访问该组件的父实例或组件。
(2)$root方法，获取根组件对象。
// Child1组件
Vue.component('Child1', {
// 通过$parent返回的是父组件对象
template: `
房产信息
{{$parent.house.address}}
{{$parent.house.size}}
房产信息
{{$parent.$parent.house.address}}
{{$parent.$parent.house.size}}
{{$root.house.address}}
{{$root.house.size}}
`
})
// Child2组件
Vue.component('Child2', {
template: `
汽车信息
{{$parent.car.name}}
{{$parent.car.color}}
`
})
// Child3组件
Vue.component('Child3', {
template: `
存款信息
{{$parent.money.value}}
{{$parent.money.bank}}
`
})
// 暂且将#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
大儿子
姓名：{{son1.name}}
年龄：{{son1.age}}
二儿子
姓名：{{son2.name}}
年龄：{{son2.age}}
小儿子
姓名：{{son3.name}}
年龄：{{son3.age}}
// Child1组件
Vue.component('Child1', {
// 通过$parent返回的是父组件对象
template:`
房产信息
{{$parent.house.address}}
{{$parent.house.size}}
房产信息
{{$parent.$parent.house.address}}
{{$parent.$parent.house.size}}
{{$root.house.address}}
{{$root.house.size}}
`
})
// Child2组件
Vue.component('Child2', {
template:`
汽车信息
{{$parent.car.name}}
{{$parent.car.color}}
`,
data() {
return {
name:'张飞',
age:23
}
}
})
Vue.component('Child3', {
template:`
存款信息
{{$parent.money.value}}
{{$parent.money.bank}}
`,
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、Mint-ui
1、element-ui组件库，引入和使用
注意：第三方组件库，必须在Vue的下面引入
主要按钮
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组件库，引入和使用
注意*：非 template/render 模式下，一些组件名在实际使用中需使用 i-小写组件名 格式（例如 Button组件 需使用 i-button）；一些组件标签名需要改成小写（例如 Tabs组件 需使用 tabs ）。具体情况参考官网提示。
Success
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组件库，引入和使用
主要按钮
new Vue({
el: '#app',
data() {
return {
value:'123'
}
},
})
效果：
三、自定义tabs组件，仿element-ui
Vue.component('b-tabs-item', {
// 定义组件的属性
props:['title'],
// 定义组件的模板
template:`
`,
data() {
return {
//是否显示
isShow:false
}
},
created() {
// 在子组件的created生命周期函数中，可以获取到父组件的数据
this.$parent.titles.push(this.title)
},
})
// tab组件
Vue.component('b-tabs', {
template:`
- {{item}}
`,
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',
})