好看的网页千篇一律，有趣的代码万里挑一。
编辑代码就像创作艺术，享受个过程，最后得到心满意足的结果。
今天继续一起学习Vue组件——父子组件、第三方组件。
父子组件
<div id="app">
<h4>app</h4>
<h4>姓名：{{name}}，年龄：{{age}}</h4>
<button @click="updateCar">修改b-one的汽车</button>
<button @click="updatePlane">修改b-two的飞机</button>
<!-- 给组件标签添加一个ref属性，然后就可以通过$refs返回拥有ref属性的组件 -->
<b-one ref="one">
<b-three></b-three>
</b-one>
<b-two ref="two"></b-two>
</div>
// 定义b-one组件
Vue.component('b-one', {
// 组件的模板中，只有包含一个根标签，
// 注意：定义插槽后才能嵌套子组件
template:`
<div class="one">
<h4>b-one</h4>
<h4>{{car}}</h4>
<h4>App----姓名：{{myname}}，年龄：{{myage}}</h4>
<slot></slot>
</div>
`,
data() {
return {
car:{
name:'奔驰',
price:'50W'
}
}
},
computed:{
myname(){
// $parent获取父组件的实例
return this.$parent.name
},
myage(){
return this.$parent.age
}
},
created() {
console.log('b-one----created');
},
mounted() {
console.log('b-one----mounted');
},
})
// 定义b-two组件
Vue.component('b-two', {
template:`
<div class="two">
<h4>b-two</h4>
<h4>{{plane}}</h4>
</div>
`,
data() {
return {
plane:{
name:'波音747',
price:'20亿'
}
}
},
})
// 定义b-three组件
Vue.component('b-three', {
template:`
<div class="three">
<h4>b-three</h4>
<h4>App----姓名：{{name}}，年龄：{{age}}</h4>
</div>
`,
computed:{
name(){
// 通过$parent还可以继续获取它的父级组件
return this.$parent.$parent.name
},
age(){
// $root获取根组件
return this.$root.age
}
},
created() {
console.log('b-three----created');
},
mounted() {
console.log('b-three----mounted');
},
})
// 创建vue实例
new Vue({
el:'#app',
// 注意观察：在父组件创建完成到挂载完成之间，包含完整的子组件的生命周期
created() {
console.log('app----created');
},
mounted() {
console.log('app----mounted');
// 根据组件在页面中的顺序返回所有的组件
console.log(this.$children);
// 返回所有带有ref属性的组件
console.log(this.$refs);
},
data() {
return {
name:'张三',
age:20
}
},
methods: {
//修改汽车的方法
updateCar(){
// $children获取的是所有子组件的实例，返回的是数组类型，再通过下标获取指定的子组件
// 如果页面的结构出现了调整，这里获取的具体的组件可以就对不上号了。
/* this.$children[0].car = {
name:'宝马',
price:'40W'
} */
// $refs对象中，保存着所有添加了ref属性的组件实例
this.$refs.one.car = {
name:'宝马',
price:'40W'
}
},
// 修改飞机的方法
updatePlane(){
/* this.$children[1].plane = {
name:'长征2号',
price:'30亿'
} */
this.$refs.two.plane = {
name:'长征2号',
price:'30亿'
}
}
},
})
第三方组件库
1. Element——网站快速成型工具
2.iview
3.Ant Design of Vue
4.移动端的 Vant
自定义表格组件--仿iview
<div id="app">
<b-table :data="data1" :columns="columns1"></b-table>
<hr>
<b-table :data="data2" :columns="columns2"></b-table>
</div>
// 定义一个b-table组件
Vue.component('b-table', {
template:`
<table>
<tr>
<th v-for="(item,index) in columns" :key="index">{{item.title}}</th>
</tr>
<tr v-for="(item,index) in data" :key="index">
<td v-for="(item2,index2) in columns" :key="index2">{{item[item2.key]}}</td>
</tr>
</table>
`,
// 定义组件标签上的属性，用于接收外部传给组件的数据
props:['data','columns'],
})
// 创建vue实例
new Vue({
el:'#app',
data() {
return {
// 表格的列数据
columns1:[
{
title:'姓名',
key:'name'
},
{
title:'年龄',
key:'age'
},
{
title:'性别',
key:'sex'
},
{
title:'工资',
key:'money'
}
],
// 表格数据
data1:[{
name:'张三',
age:20,
sex:'男',
money:10000
},{
name:'李四',
age:22,
sex:'女',
money:20000
},{
name:'王五',
age:24,
sex:'女',
money:30000
}],
columns2:[
{
title:'编号',
key:'id'
},
{
title:'车名',
key:'name'
},
{
title:'产地',
key:'address'
},
],
// 表格数据2
data2:[{
id:'1001',
name:'奔驰',
address:'德国'
},{
id:'1002',
name:'红旗',
address:'中国'
},{
id:'1003',
name:'捷豹',
address:'英国'
}]
}
},
})
自定义表格组件--仿element-ui
<div id="app">
<b-table :data="data1">
<b-table-column prop="name" label="姓名"></b-table-column>
<b-table-column prop="age" label="年龄"></b-table-column>
<b-table-column prop="sex" label="性别"></b-table-column>
<b-table-column prop="money" label="工资"></b-table-column>
</b-table>
<hr>
<b-table :data="data2">
<b-table-column prop="id" label="编号"></b-table-column>
<b-table-column prop="name" label="车名"></b-table-column>
<b-table-column prop="address" label="产地"></b-table-column>
</b-table>
</div>
// 定义一个b-table-column组件
Vue.component('b-table-column', {
template:`
<th>{{label}}</th>
`,
props:['prop','label'],
mounted() {
// 子组件挂载完成时，将获取到的属性的名称，添加到父组件的columns数组中。
this.$parent.columns.push(this.prop)
},
})
// 定义一个b-table组件
Vue.component('b-table', {
template:`
<table>
<tr>
<slot></slot>
</tr>
<tr v-for="(item,index) in data" :key="index">
<td v-for="(item2,index2) in columns" :key="index2">{{item[item2]}}</td>
</tr>
</table>
`,
// 定义组件标签上的属性，用于接收外部传给组件的数据
props:['data'],
data() {
return {
// 该数组存放属性的名称
columns:[]
}
},
})
// 创建vue实例
new Vue({
el:'#app',
data() {
return {
// 表格数据
data1:[{
name:'张三',
age:20,
sex:'男',
money:10000
},{
name:'李四',
age:22,
sex:'女',
money:20000
},{
name:'王五',
age:24,
sex:'女',
money:30000
}],
// 表格数据2
data2:[{
id:'1001',
name:'奔驰',
address:'德国'
},{
id:'1002',
name:'红旗',
address:'中国'
},{
id:'1003',
name:'捷豹',
address:'英国'
}]
}
},
})
网友评论