子组件通过.sync和$emit()修改父组件的值

父组件:

<my-form ref="form" :activeName.sync="activeName"></my-form>

// 引入子组件
import MyForm from './form'

。。。

components: {
        MyForm
    },
data() {
        return {
            activeName: 'first'
        };
    },

子组件:

<el-tabs v-model="midActiveName" type="card" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">用户管理</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>


props:{
        activeName:{
            type: String,
            default: ()=>'first'
        }
    },



computed:{
        midActiveName:{
            get(){
                return this.activeName;
            },
            set(val){
                this.$emit('update:activeName',val);
            }
        }
    },

猜你喜欢

转载自blog.csdn.net/qq_46372045/article/details/129340888