门户网站建设工作流程,网站刷流量对网站有影响吗,做网站的app,ui设计师证demo案例#xff1a;
父组件的el-select发生改变#xff0c;子组件的el-select也可以发生改变
子组件的el-select发生改变#xff0c;父组件的el-select也可以发生改变
核心就是给el-select组件的v-modle值互传
Index父组件页面 template langd…demo案例
父组件的el-select发生改变子组件的el-select也可以发生改变
子组件的el-select发生改变父组件的el-select也可以发生改变
核心就是给el-select组件的v-modle值互传
Index父组件页面 template langdiv我是Index页面el-form refform :modelform label-width200px el-form-item label活动名称 classmy-formel-input v-modelform.name stylewidth: 80%; placeholder请输入内容 :rows100/el-input/el-form-itemel-form-item label活动区域el-select v-modelform.region multiple placeholder请选择活动区域 stylewidth: 80%;el-option v-foritem in devTypes :labelitem.name :valueitem.id :keyitem.id/el-option/el-select/el-form-itemel-form-item label活动时间el-col :span11el-date-picker typedate placeholder选择日期 v-modelform.date1 stylewidth: 80%;/el-date-picker/el-colel-col classline :span2-/el-colel-col :span11el-time-picker placeholder选择时间 v-modelform.date2 stylewidth: 80%;/el-time-pickerel-time-picker /el-time-pickerinfection/infection/el-col/el-form-itemel-form-item label即时配送el-switch v-modelform.delivery/el-switch/el-form-itemel-form-item label活动性质el-checkbox-group v-modelform.typeel-checkbox label美食/餐厅线上活动 nametype/el-checkboxel-checkbox label地推活动 nametype/el-checkboxel-checkbox label线下主题活动 nametype/el-checkboxel-checkbox label单纯品牌曝光 nametype/el-checkbox/el-checkbox-group/el-form-itemel-form-item label特殊资源el-radio-group v-modelform.resourceel-radio label线上品牌商赞助/el-radioel-radio label线下场地免费/el-radio/el-radio-group/el-form-itemel-form-item label活动形式el-input typetextarea v-modelform.desc stylewidth: 80%;/el-input/el-form-itemel-form-itemel-button typeprimary clickonSubmit立即创建/el-buttonel-button取消/el-button/el-form-item/el-formElselect :zhiform.region zichuanzichuan/ /div
/template
scriptimport Elselect from ./Elselect .vue
export default {name:I-ndex,components:{Elselect },data(){return{beneficial,devTypes:[{id:1,name:小李,age:10},{id:2,name:小李1,age:11},{id:3,name:小李3,age:12},{id:4,name:小李4,age:12},],form: {name: ,region: ,date1: ,date2: ,delivery: false,type: [],resource: ,desc: ,},dialogVisible: true}},created(){let arr [1,2,undefined,undefined,null,null,NaN,NaN,{},{},0,0] },methods: {onSubmit(){console.log(this.form,form)},zichuan(e){this.form.region econsole.log(e,子给父传过来的)}}
}
/script
style langscss scoped
/* /deep/ .el-form-item__label{font-size: 40px;} */::v-deep .el-form-item__label{font-size: 40px;} .my-form ::v-deep .el-form-item__label{font-size: 20px;}::v-deep .el-input__inner::placeholder{/* color:aqua; */font-size: 20px;}/* ::v-deep .el-input__inner{min-height:80px;font-size: 30px;} */::v-deep .el-textarea__inner{font-size: 30px;}
/style
Elselect子页面
template langdiv我是Elselect页面el-form refform :modelform label-width200px el-form-item label活动区域1el-select v-modelz multiple placeholder请选择活动区域 stylewidth: 80%; changezihcuanfuel-option v-foritem in devTypes :labelitem.name :valueitem.id :keyitem.id/el-option/el-select/el-form-itemel-button typeprimary clickonSubmit立即创建/el-buttonel-button取消/el-button/el-form/div
/template
script
export default {name:El-select,props:{zhi:Object},watch:{
zhi:{handler(val,old){console.log(val)this.z val},deep:true,immediate:true
}},data(){return{z:,devTypes:[{id:1,name:小李,age:10},{id:2,name:小李1,age:11},{id:3,name:小李3,age:12},{id:4,name:小李4,age:12},],form: {name: ,region: ,date1: ,date2: ,delivery: false,type: [],resource: ,desc: ,},}},created(){let arr [1,2,undefined,undefined,null,null,NaN,NaN,{},{},0,0] },methods: {onSubmit(){console.log(this.form,form)},
//change事件zihcuanfu(e){console.log(e,e)this.$emit(zichuan,this.z)},}
}
/script
