將要實(shí)現(xiàn)在頁面中添加一個(gè)按鈕打開一個(gè)彈窗組件，并把一個(gè)object傳給子組件。
頁面獲取XJia組件 ：XJia是本頁面要傳的數(shù)據(jù)，:isvisibleadd 判斷按鈕點(diǎn)擊時(shí)打開子組件

<XJia :XJia='XJia'  :isvisibleadd='addinshow'></XJia>    //當(dāng)點(diǎn)擊click后:isvisibleadd等于true打開子組件

定義向二級(jí)組件傳遞的數(shù)據(jù)

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    //當(dāng)點(diǎn)擊click后:isvisibleadd等于true打開子組件
    },
}

二級(jí)路由界面代碼如下

<template>
    <div>
        <el-dialog title="違規(guī)下架理由" :visible.sync="cData.dialogVisible" width="40%" :before-close="handleClose(cData.dialogVisible)">
            <div class="bt">
                <h5>違規(guī)商品ID：</h5><span>{{cData.goods_id}}</span>
            </div>
            <div class="bt">
                <h5>違規(guī)商品貨號(hào)：</h5><span>{{cData.goods_sn}}</span>
            </div>
            <div class="bt">
                <h5>違規(guī)商品名稱：</h5><span>{{cData.goods_name}}</span>
            </div>
            <div class="bt">
                <h5>違規(guī)下架理由：</h5>
                <span style="float: left;">
                    <el-input type="textarea" :rows="4" placeholder="請(qǐng)輸入內(nèi)容" 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;   //接收傳遞過來的內(nèi)容
            this.cData = XJia               //傳遞的內(nèi)容賦給cData
        },
        methods: {
            handleClose(done) {
                done = false      //點(diǎn)擊關(guān)閉按鈕，返回一個(gè)true
            }
        }
    }
</script>

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