demo案例:
父组件的el-select发生改变,子组件的el-select也可以发生改变
子组件的el-select发生改变,父组件的el-select也可以发生改变
核心就是给el-select组件的v-modle值互传
Index父组件页面
<template lang=""><div>我是Index页面<el-form ref="form" :model="form" label-width="200px" ><el-form-item label="活动名称" class="my-form"><el-input v-model="form.name" style="width: 80%;" placeholder="请输入内容" :rows="100"></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="form.region" multiple placeholder="请选择活动区域" style="width: 80%;"><el-option v-for="item in devTypes" :label="item.name" :value="item.id" :key="item.id"></el-option></el-select></el-form-item><el-form-item label="活动时间"><el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 80%;"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 80%;"></el-time-picker><el-time-picker ></el-time-picker><infection></infection></el-col></el-form-item><el-form-item label="即时配送"><el-switch v-model="form.delivery"></el-switch></el-form-item><el-form-item label="活动性质"><el-checkbox-group v-model="form.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="form.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="form.desc" style="width: 80%;"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button><el-button>取消</el-button></el-form-item></el-form><Elselect :zhi="form.region" @zichuan="zichuan"/> </div>
</template>
<script>import 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 lang="scss" 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 lang=""><div>我是Elselect页面<el-form ref="form" :model="form" label-width="200px" ><el-form-item label="活动区域1"><el-select v-model="z" multiple placeholder="请选择活动区域" style="width: 80%;" @change="zihcuanfu"><el-option v-for="item in devTypes" :label="item.name" :value="item.id" :key="item.id"></el-option></el-select></el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button><el-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>