子组件传值父组件数据刷新的问题

最新推荐文章于 2023-07-10 11:05:57 发布

吃痴鱼

最新推荐文章于 2023-07-10 11:05:57 发布

阅读量1k

点赞数

分类专栏： css3 vue

本文链接：https://blog.csdn.net/qq_52685664/article/details/118695385

版权

vue 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

css3

12 篇文章 0 订阅

订阅专栏

子组件监听值改变，自定义一个事件，在父组件使用时该事件为接收数据接口事件

子组件：监听open值的变化，自定义事件 this.$emit("refreshPart")

watch: {
        open: {
            handler(val) {
                this.inputValue = val
                if (!val) {
                    this.contractSectId = ''
                    this.$emit("refreshPart")
                }
            }
        }
    },

父组件：接收事件 @refreshPart="getPartInfo"

<part-info ref="partinfo" @refreshPart="getPartInfo"></part-info>

父组件接口赋值事件

getPartInfo() {
            this.partOptions = [];
            listPartialTree({
                teamId: this.form.teamId,
                projectId: this.form.projectId,
                contractSectId: this.form.contractSectId
            }).then(res => {
                this.partOptions = res.data;
            });
        },

子组件代码

<template>
    <el-dialog
        :title="title"
        :visible.sync="open"
        width="450px"
        append-to-body
    >
        <tree-select-edit
            :inputValue = "inputValue"
            :fatherId = "contractSectId"
        />
    </el-dialog>
</template>

<script>
import FormButton from '_c/FormButton'
import TreeSelectEdit from '_c/TreeSelectEdit/index'

export default {
    name: 'WorkMeteringApplyForm',
    components: {
        FormButton,
        TreeSelectEdit
    },
    data() {
        return {
            // 是否显示弹出层
            open: false,
            title: '工程部位',
            inputValue: false,
            contractSectId: undefined
        }
    },
    computed: {
        projectId() {
            return this.$store.getters.projectId
        }
    },
    watch: {
        open: {
            handler(val) {
                this.inputValue = val
                if (!val) {
                    this.contractSectId = ''
                    this.$emit("refreshPart");
                }
            }
        }
    },
    created() {
    },
    methods: {
        /** 打开对话框 */
        show(contractSectId) {
            this.open = true
            this.contractSectId = contractSectId
        }
    }
}
</script>

<style lang="scss" scoped>
    .el-col-form {
        height: 30px;
    }
    .list-div {
        margin-top: 20px;
        margin-bottom: 10px;
    }
</style>