vue实现页面之间的el-select同步数据选项

demo案例：

父组件的el-select发生改变，子组件的el-select也可以发生改变

子组件的el-select发生改变，父组件的el-select也可以发生改变

核心就是给el-select组件的v-modle值互传

Index父组件页面

我是Index页面-立即创建取消  import Elselectfrom './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,'子给父传过来的')}}}/* /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;}

Elselect子页面

我是Elselect页面立即创建取消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)},}}