VUE中$refs和$ref的使用详解

ref: 给元素或者子组件注册引用信息

ref有三种用法：
1.ref加在普通元素上，获取用this.$ref.xxx可以获取到dom元素。

<div ref="testRef">测试ref</div>
//获取
 mounted(){
    console.log(this.$refs.testRef,"----------");
  },

结果如下图：

2.ref加在子组件上，用this.$ref.xxx可以获取到组件实例，可以使用子组件的所有方法。
使用： 

1.父组件：（部分代码省略了..）

<template>
  <div>
    <el-button type="primary" @click="openAdd(row)">
      <i class="el-icon-plus"></i>&nbsp;添加
     </el-button>
   <div class="box_table">
    <el-table :data="tableData" tooltip-effect="dark" height="700" style="width: 100%" 
    border>
        ...

      <el-table-column label="操作" align="center">
       <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row)">
         <i class="fas fa-edit" aria-hidden="true"></i>&nbsp;编辑
         </el-button>
         <el-button size="small" type="danger" @click="handleRemove(scope.row)">
          <i class="fas fa-trash-alt" aria-hidden="true"></i>&nbsp;删除
         </el-button>
         </template>
       </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-pagination background @current-change="handleCurrentChange" 
        @size-change="handleSizeChange" :current-page.sync="currentPage" 
        :page-size="pageSize" :page-sizes="[5, 10, 15, 30]"
        layout="total, sizes,prev, pager, next, jumper" :total="total">
    </el-pagination>
    </div>
    <div><test ref="test"></test></div>  //引入子组件
  </div>
</template>
<script>
import test from "../../components/mine/test.vue";
import {getTowerLinePageAll} from "@/api/device/device";
export default {
  components: {
    test
  },
  data() {
    return {
      tableData: [
        {},
      ],
   // 分页
    currentPage: 1,// 当前页码
    pageSize: 10, // 每页显示多少条
    total: 0,
   }
  },

  methods: {
   // 改变多少条
   handleSizeChange(pageIndex) {
    this.pageSize = pageIndex
    this.currentPage = 1;
    this.getList();
  },

  // 改变当前页面
  handleCurrentChange(pageIndex) {
    this.currentPage = pageIndex;
    this.getList();
  },

  getList() {
    getTowerLinePageAll(this.currentPage, this.pageSize).then((data) => {
      const _tableData = data.data.data.records;
      ...
      });
      this.total = data.data.data.total;
    });
  },
  openAdd(index, row) {
    this.$refs.test.init(row) //用$refs赋值调用子组件的init方法
  },
  handleDelete(index, row) {
    console.log(index, row)
  }
},
created() {
  this.getList();
}

};
</script>

<style>
</style>

2.子组件：（部分代码省略了..） 

<template>
  <div>
    <div>
      <!-- 新建线路 -->
      <el-dialog title="新建巡检线路" :visible.sync="Linevisible" width="35%" height="50%">
        <el-form ref="ruleForm" :model="lineModel">
          <el-form-item label="线路名称" prop="lineName" :label-width="formLabelWidth" style="display: inline-block;">
            <el-input v-model="lineModel.lineName" placeholder="线路名称"></el-input>
          </el-form-item>

          <el-form-item label="电压" prop="voltageGrade" :label-width="formLabelWidth"
            style="display: inline-block;margin-left: 20px;">
            <el-select v-model="lineModel.voltageGrade" placeholder="1~18个字符，支持中文\英文\数字" style="width: 200px">
              <el-option label="35kV" value="35kV"></el-option>
              <el-option label="110KV" value="110KV"></el-option>
              <el-option label="220KV" value="220KV"></el-option>
              <el-option label="500kV" value="500kV"></el-option>
              <el-option label="750kV" value="750kV"></el-option>
              <el-option label="1000KV" value="1000KV"></el-option>
              <el-option label="DC500kV" value="DC500kV"></el-option>
              <el-option label="DC800kV" value="DC800kV"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建人" prop="createName" style="display: inline-block" :label-width="formLabelWidth">
            <el-input v-model="lineModel.createName" placeholder="创建人"></el-input>
          </el-form-item>
          <!-- <el-form-item label="管理部门" prop="deptName" style="display: inline-block;margin-left: 20px;"
            :label-width="formLabelWidth">
            <el-select v-model="lineModel.deptName" placeholder="请选择部门" style="width: 203px;">
              <el-option :label="item.name" v-for="(item, index) in selects" :key="index + '2'" :value="item.name"
                @click.native="handleSelect(item)"></el-option>
            </el-select>
          </el-form-item> -->

          <el-form-item label="管理单位" prop="managerOrg" style="display: inline-block; margin-right: 10px"
            :label-width="formLabelWidth">
            <el-input v-model="lineModel.managerOrg" placeholder="管理单位" style="width: 203px"></el-input>
          </el-form-item>
          <el-form-item label="起点设备" prop="startDevice" style="display: inline-block;margin-left: 7px;"
            :label-width="formLabelWidth">
            <el-input v-model="lineModel.startDevice" placeholder="起点设备" style="width: 203px"></el-input>
          </el-form-item>
          <el-form-item label="终点设备" prop="endDevice" style="display: inline-block; margin-right: 10px"
            :label-width="formLabelWidth">
            <el-input v-model="lineModel.endDevice" placeholder="终点设备" style="width: 203px"></el-input>
          </el-form-item>
          <el-form-item style="text-align: center;">
            <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { addTowerLine } from "@/api/device/device";
export default {
  components: {},
  data() {
    return {
      Linevisible: false,
      // 新建巡检线路数据
      lineModel: {
        lineName: "",
        voltageGrade: "",
        endDevice: "",
        startDevice: "",
        managerOrg: "",
        deptName: "",
      },
      formLabelWidth: "80px",
    };
  },
  methods: {
    //新建巡检线路
    submitForm() {
      let {
        lineName,
        voltageGrade,
        deptName,
        deptId,
        endDevice,
        startDevice,
        managerOrg,
        createName,
      } = this.lineModel;
      let lineLength = 0;
      let towerCount = 0;
      // this.$confirm("此操作将创建是否继续?", "提示", {
      //   confirmButtonText: "确认",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // }).then(() => {
      addTowerLine({
        createName,
        voltageGrade,
        deptName,
        deptId,
        endDevice,
        lineLength,
        lineName,
        managerOrg,
        startDevice,
        towerCount,
      })
        .then(() => {
          this.getList();
          this.$notify.success("提交成功！");
        })
        .catch(() => {
          this.$confirm.error("取消创建");
        });
      // });
      this.Linevisible = false;


    },
    init() {//父组件调用的方法
      console.log('来了')
      this.Linevisible = true;
    
    },
  },
  created() { },

}
</script>
<style lang='scss' scoped>
</style>

效果：

由有不好的地方，可指出哈~互相学习~