一、概述
近期由于工作需要，开始重新接触VUE前端开发，由于许久没有做前端开发了，这次复习下Vue2的组件以及组件传值的常用功能。
本次演示的是一个Tab的展示，在index中包含多个tab页的内容，tab页的内容作为组件引入，传值通过sync语法糖传递。
二、组件开发
首先是父组件index.vue
<template>
<div>
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="first">
<BaseInfo
:formData.sync="baseInfoData"
:formDisabled.sync="baseInfoFormDisabled"
:formControl.sync="baseInfoControll"
></BaseInfo>
</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
<el-row>
<el-button type="primary" @click="onSubmit">默认按钮</el-button>
</el-row>
</div>
</template>
<script>
import BaseInfo from './BaseInfo.vue'
export default {
name: 'XibTab',
components: {
BaseInfo
},
data() {
return {
activeName: 'first',
baseInfoData: {
type: []
},
baseInfoControll: {
name: false
},
baseInfoFormDisabled: true
}
},
mounted: function () {},
methods: {
handleClick(tab, event) {
console.log(tab, event)
},
onSubmit() {
console.log('submit!', JSON.stringify(this.baseInfoData))
}
}
}
</script>
子组件
<template>
<div>
<el-form ref="form" :model="formData" :disabled="formDisabled" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="formData.name" :disabled="formControl.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="formData.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-col :span="11">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="formData.date1"
style="width: 100%"
></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker
placeholder="选择时间"
v-model="formData.date2"
style="width: 100%"
></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="即时配送">
<el-switch v-model="formData.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="formData.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源">
<el-radio-group v-model="formData.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式">
<el-input type="textarea" v-model="formData.desc"></el-input>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'BaseInfo',
props: {
stopWatch: {
default: false
},
formDisabled: {
type: Boolean,
default: false
},
formControl: {
type: Object,
default() {
return {}
}
},
formData: {
type: Object,
default() {
return {}
}
}
},
data() {
return {
activeName: 'first'
}
},
mounted: function () {
console.log(
'stopWatch: ',
this.stopWatch,
', formConrol: ',
JSON.stringify(this.formControl),
', formData: ' + JSON.stringify(this.formData)
)
},
methods: {
handleClick(tab, event) {
console.log(tab, event)
},
onSubmit() {
console.log('submit!', JSON.stringify(this.formData))
}
}
}
</script>
界面如下：
三、总结
这次复习过程中，学习了以下3个知识点：
1.子组件参数
在子组件中定义props属性，接收来自父组件的参数。
2.sync语法糖
实现了父子组件参数的双向绑定。
3.form表单禁用
form表单禁用后，表单中的控件都会禁用，无法对某个空间单独开启，除非对这个单独的表单单独加上el-form。
四、感悟
经济越来越差，工作越来越卷，能熬到什么时候？
