vue父组件与子组件通信

最新推荐文章于 2023-07-11 20:36:45 发布

紫晓宁

最新推荐文章于 2023-07-11 20:36:45 发布

阅读量918

点赞数 1

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

本文链接：https://blog.csdn.net/zixiaoning/article/details/122116518

版权

前端web 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在父组件上弹出子组件

父组价代码

<template>
    <div>
        <div class='container'>
            <el-button type='primary' icon='el-icon-create' @click='showAdd'>新增
            </el-button>
            <addDevice @add_dialogStatus='closeAdd' :dialogStatus='addDialogStatus'>
            </addDevice>
        </div>
    </div>
</template>
<script>
//引入组件
import addDevice from '../common/addDevice';//引入子组件
export default {
    components: {
        addDevice  //注册子组件，便于在本页面中使用
    },
    data() {
        return { addDialogStatus: false };
    },
    methods: {
        showAdd() {
            this.addDialogStatus = true;
        },
        closeAdd() {
            this.addDialogStatus = false;
        }
    }
};
</script>

<style scoped>
</style>

子组件代码段

<template>
    <el-dialog title='添加设备' :visible.sync='dialogFormViseble' @close='closeDialog'>
        <el-form ref='form' :model='device_form' style='margin-left: 30px'>
        </el-form>
        <div slot='footer' class='dialog-footer'>
            <el-button @click='dialogFormViseble = false'>取 消</el-button>
            <el-button type='primary' @click='dialogFormViseble = false'>确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
export default {
    props: ['dialogStatus'],//子组件接受父组件数据
    data() {
        return {
            dialogFormViseble: false
        };
    },
    methods: {
        closeDialog() {
            this.$emit('add_dialogStatus');
        }
    },
    watch: {
        //子组件监听父组件的dialogStatus变化
        dialogStatus(newLv, oldLv) {
            this.dialogFormViseble = newLv;
        }
    }
};
</script>
</style>