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

最新推荐文章于 2023-06-12 16:53:49 发布

郭小白呀

最新推荐文章于 2023-06-12 16:53:49 发布

阅读量239

点赞数

分类专栏： vue 文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/qq_46372045/article/details/129340888

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章描述了一个Vue.js的应用场景，其中父组件通过`my-formref`和`:activeName.sync`属性与子组件进行通信，子组件使用`el-tabs`组件来管理标签页，并通过`v-model`和`tab-click`事件响应父组件的activeName变化。子组件利用计算属性`midActiveName`来实现`activeName`的双向绑定。

摘要由CSDN通过智能技术生成

父组件：

<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);
            }
        }
    },