element 弹窗组件 — vue点击按钮打开组件并向组件传值

将要实现在页面中添加一个按钮打开一个弹窗组件，并把一个object传给子组件。
页面获取XJia组件 ：XJia是本页面要传的数据，:isvisibleadd 判断按钮点击时打开子组件

<XJia :XJia='XJia'  :isvisibleadd='addinshow'></XJia>    //当点击click后:isvisibleadd等于true打开子组件

定义向二级组件传递的数据

data() {
    return {    
        XJia: {
            dialogVisible: null,
            goods_sn: '',
            goods_name: '',
            goods_id: ''
        }
    }
},

methods(){
      //下架操作
      Xj(index, item) {
        this.XJia.dialogVisible = true
        this.XJia.goods_id = item.goods_id
        this.XJia.goods_name = item.goods_name
        this.XJia.goods_sn = item.goods_sn
        // console.log(this.XJia)
        this.addinshow = true    //当点击click后:isvisibleadd等于true打开子组件
    },
}

二级路由界面代码如下

<template>
    <div>
        <el-dialog title="违规下架理由" :visible.sync="cData.dialogVisible" width="40%" :before-close="handleClose(cData.dialogVisible)">
            <div class="bt">
                <h5>违规商品ID：</h5><span>{{cData.goods_id}}</span>
            </div>
            <div class="bt">
                <h5>违规商品货号：</h5><span>{{cData.goods_sn}}</span>
            </div>
            <div class="bt">
                <h5>违规商品名称：</h5><span>{{cData.goods_name}}</span>
            </div>
            <div class="bt">
                <h5>违规下架理由：</h5>
                <span style="float: left;">
                    <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="textarea">
                    </el-input>
                </span>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cData.dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="btn()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        props: {
            XJia: {
                type: Object,
                require: true
            },
            isvisibleadd: {
                type: Boolean,
                require: true
            }
        },
        data() {
            return {
                textarea: '',
                cData: null
            }
        },
        created() {
            let _this = this;
            let { XJia } = this._props;   //接收传递过来的内容
            this.cData = XJia               //传递的内容赋给cData
        },
        methods: {
            handleClose(done) {
                done = false      //点击关闭按钮，返回一个true
            }
        }
    }
</script>

以上都是分页所需的功能，也是自己在自己写案例中所遇到的，嘻嘻嘻