自定义弹窗组件

远水去见远山

于 2020-11-03 15:31:08 发布

阅读量205

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_48621384/article/details/109470410

版权

在这里插入图片描述

父组件将id传给子组件：
弹窗点击事件：
父组件：

 <template slot-scope="scope">
                        <el-button type="text" size="small" @click="upimages(scope.row.id)">上报信息</el-button>
                        <el-button type="text" size="small" @click="faultResult(scope.row.id)">故障处理</el-button>
                        <el-button type="text" size="small" @click="deleteRow(scope.row.id)">删除</el-button>
 </template>
                    
引用弹窗的地方：
<image-modal :visible.sync="dialogVisible" :id="id"/>

定义一个数字类型的id
data() {
            return {
                id: null,
                }
将id赋值：
upimages(id) {
                this.id = id
                this.$set(this.$data, 'dialogVisible', true)
            },

子组件定义一个id接收：

 props: {
            id: {
                type: Number
            }
        },