vue 子组件绑定多个Model .sync使用

最新推荐文章于 2023-04-03 11:31:01 发布

原创最新推荐文章于 2023-04-03 11:31:01 发布 · 674 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

17 篇文章

订阅专栏

本文详细探讨了在Vue中如何在子组件上使用.sync修饰符绑定多个Model，通过实例解析了父子组件间的数据传递过程，帮助开发者更好地理解和运用Vue的组件通信机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件

 <el-city-info :provinces_id="provinces_id" :city_id="city_id" 
        :form.sync="form" :options="options" :id="id"
 ></el-city-info>

// An highlighted block
data(){
            return{
                options:[
                    {},
                    {},
                    {}
                ],
                form:{
                    provinces_id:'',
                    city_id:'',
                    region_id:'',
                },
                provinces_id:{$info.provinces_id|default=0},
                city_id:{$info.city_id|default=0},
                region_id:{$info.region_id|default=0},
                id:{$info.tenants_id|default=0},
            }
        },

子组件

<script>
    Vue.component('el-city-info', {
        data: function () {
            return {}
        },
        methods: {
            gettype($id, $type) {
                if ((this.id && !$id)) {
                    axios.post('/admin/stay/get_type', {}).then(res => {
                        Vue.set(this.options, 0, res.data.data)
                        if (this.provinces_id) {
                            this.form.provinces_id = this.provinces_id
                        }
                    })
                    axios.post('/admin/stay/get_type', {
                        id: this.provinces_id
                    }).then(res => {
                        Vue.set(this.options, 1, res.data.data)
                        if (this.city_id) {
                            this.form.city_id = this.city_id
                        }
                    })
                    axios.post('/admin/stay/get_type', {
                        id: this.city_id
                    }).then(res => {
                        Vue.set(this.options, 2, res.data.data)
                        if (this.region_id) {
                            this.form.region_id = this.region_id
                        }
                    })
                } else {
                    axios.post('/admin/stay/get_type', {
                        id: $id
                    }).then(res => {
                        if ($type == 0) {
                            this.form.city_id = null
                            this.form.region_id = null
                        } else {
                            this.form.region_id = null
                        }

                        Vue.set(this.options, $type + 1, res.data.data)
                    })
                }
            },
            addtype() {
                axios.post('/admin/stay/get_type', {}).then(res => {
                    Vue.set(this.options, 0, res.data.data)
                })
            }
        },
        created() {
            if (this.id) {
                this.gettype()
            } else {
                this.addtype()
            }
        },
        props: {
            form: Object,
            provinces_id: String,
            city_id: String,
            region_id: String,
            id: String,
            options: Array,
        },
        computed: {
            provinces: {
                get: function () {
                    return this.form.provinces_id
                },
                set: function (val) {
                    this.emit('updata:form.provinces_id',val)
                }
            },
            city: {
                get: function () {
                    return this.form.provinces_id
                },
                set: function (val) {
                    this.emit('updata:form.city',val)
                }
            },
            region: {
                get: function () {
                    return this.form.region_id
                },
                set: function (val) {
                    this.emit('updata:form.region_id',val)
                }
            },
        },

        template: '                            <el-form-item label="选择城市" >\n' +
            '                                <el-select v-model="form.provinces_id"    filterable placeholder="请选择" @change="gettype(form.provinces_id,0)"  >\n' +
            '                                    <el-option\n' +
            '                                            v-for="item in options[0]"\n' +
            '                                            :key="item.location_id"\n' +
            '                                            :label="item.name"\n' +
            '                                            :value="item.location_id"\n' +
            '                                    >\n' +
            '                                    </el-option>\n' +
            '                                </el-select>\n' +
            '                                <el-select v-model="form.city_id"   filterable placeholder="请选择" @change="gettype(form.city_id,1)" >\n' +
            '                                    <el-option\n' +
            '                                            v-for="item in options[1]"\n' +
            '                                            :key="item.location_id"\n' +
            '                                            :label="item.name"\n' +
            '                                            :value="item.location_id"\n' +
            '                                    >\n' +
            '\n' +
            '                                    </el-option>\n' +
            '                                </el-select>\n' +
            '                                <el-select v-model="form.region_id"    filterable placeholder="请选择">\n' +
            '                                    <el-option\n' +
            '                                            v-for="item in options[2]"\n' +
            '                                            :key="item.location_id"\n' +
            '                                            :label="item.name"\n' +
            '                                            :value="item.location_id">\n' +
            '                                    </el-option>\n' +
            '                                </el-select>\n' +
            '                            </el-form-item>'
    })
</script>