vue中当前组件的(表格行)点击事件，调用其他组件对话框案例

数据结构
tableData: [
    {
      id: "1",
      date: "2011-05-03",
      name: "张三",
      address: "北京市房山区19号",
      IsAudit: 0,
      sex: "1",
    },
    {
      id: "2",
      date: "2012-05-02",
      name: "李四",
      address: "北京市房山区20号",
      IsAudit: 1,
      sex: "0",
    },
    {
      id: "3",
      date: "2013-05-02",
      name: "王五",
      address: "北京市房山区21号",
      IsAudit: 10,
      sex: "-1",
    }
],


当前页面元素
<el-row :gutter="20" type="flex" justify="start">
  <el-col :span="8">
    <template>
      <el-table
        :data="tableData"
        style="width: 100%"
        @row-click="handleHangData"  点击当前行  拿取当前行的饿数据
      >
        <el-table-column
          prop="date"
          label="日期"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180"
        ></el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column
      ></el-table>
    </template>
  </el-col>
</el-row>


引用组件 ref用来给元素或者子组件注册引用信息 
<ContentDetail ref="ContentDetail" />                 

方法
<script>
    引入对话框页面
    import ContentDetail from './components/ContentDetail.vue'      
    export default {
        name: "pageIndex",
        data(){
            return {
              
            }
        }
        components: {                                                       
            ContentDetail    注册使用组件
        },
        methods: {
            handleHangData(row){
              调用组件中的 show 方法   并且传入参数
              this.$refs["ContentDetail"].show(row);
            }
        }
     };
</script>

这个是ContentDetail界面

<template>
  <el-dialog
    title="表格的数据"
    :visible.sync="dialogVisible"
    width="70%"
    append-to-body 
  >
    <div class="main-content">
      <div class="line">
        <b>名称</b>
        <span>{{currentData.name || "--"}}</span>
      </div>
      <div class="line">
        <b>日期</b>
        <span>{{currentData.date || "--"}}</span>
      </div>
      <div class="line">
        <b>描述</b>
        <span>{{currentData.desc || "--"}}</span>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    name:"ContainerCotent",
    data(){
      return{
        currentData:{},          接收传来的数据
        dialogVisible: false     默认消失
      }
    },
    methods:{
      show(row){                    调用show()方法
        this.dialogVisible = true;  让弹出框出来
        this.currentData = {
          name:row.name,
          date:row.date,
          desc:row.address
        }
      },
      close(){
        this.dialogVisible = false;
      }
    }
  }
</script>
<style scoped>
 样式的话  自己定义  不放了
</style>

 点击行显示对应的数据信息