Vue2修改props传递的值

RegularEmployee

已于 2023-06-07 16:26:31 修改

阅读量784

点赞数

分类专栏：组件封装文章标签： vue.js javascript elementui

于 2023-06-07 16:16:07 首次发布

本文链接：https://blog.csdn.net/m0_52526748/article/details/131089793

版权

组件封装专栏收录该内容

2 篇文章 0 订阅

订阅专栏

方式一

eduList.vue（子组件）

<template>
    <el-dialog class="associated-member" title="添加内容" :visible.sync="visible" width="50%" @close="reset">
    </el-dialog>
</template>
<script>
export default {
    name: "eduList",
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            visible:this.dialogVisible
        }
    },
    methods:{
        reset() {
            this.visible = false
        }
    },
}
</script>
<style lang="scss" scoped></style>

eduTablelist.vue（父组件）

<template>
   <el-button @click="dialogShowChange(true)">添加内容</el-button>
   <eduList ref="eduList" :dialogVisible="false" />
</template>
<script>
import eduList from "./eduList.vue"
export default {
    name: "eduList",
    data() {
        return {}
    },
    components: {eduList},
    methods:{
        dialogShowChange(val){
            this.$refs.eduList.visible = val;
        }
    },
    watch: {}
}
</script>
<style lang="scss" scoped></style>

方式二

eduList.vue（子组件）

<template>
    <el-dialog class="associated-member" title="添加内容" :visible.sync="visible" width="50%" @close="reset">
    
    </el-dialog>
</template>
<script>
export default {
    name: "eduList",
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
           visible:this.dialogVisible
        }
    },
    methods:{
        reset() {
           this.$emit("dialogShowChange", false);
        }
    },
    watch: {
        dialogVisible(val) {
            this.visible = val
        }
    }
}
</script>
<style lang="scss" scoped></style>

eduTablelist.vue（父组件）

<template>
   <el-button @click="onEduAndFormClick">添加内容</el-button>
   <eduList ref="eduList" :dialogVisible="dialogVisible" @dialogShowChange="dialogShowChange" />
</template>
<script>
import eduList from "./eduList.vue"
export default {
    name: "eduList",
    data() {
        return {
            dialogVisible:false;
        }
    },
    components: {eduList},
    methods:{
        onEduAndFormClick(){
            this.dialogVisible = true;
        },
        dialogShowChange(val){
            this.dialogVisible = val;
        }
    },
    watch: {}
}
</script>
<style lang="scss" scoped></style>