vue父组件与子组件通信

在父组件上弹出子组件

父组价代码

<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>