利用ref属性获取element-ui组件的方法（vue2）

---

前言

对于ref的用法一直不太理解，做项目遇见一个小例子记录一下其中之一的用法，自留复盘

---

一、关于ref？

1.在vue2中，给元素加ref属性，就可以通过this.$ref.元素名获取这个元素从而进行一些操作

<input ref='myInput' type="password"/>

this.$refs.myInput   //代表input元素

2.在vue2中，ref属性也可以用在子组件上获取组件实例，就可以操作元素或者组件了

二、ref属性获取element-ui组件的方法

1.前提

你所应用的element-ui组件自带方法，如图本例应用的是tree树形组件的getCheckedKeys的方法

2.相关代码

1.给组件el-tree绑定ref属性，随便取个值permTree，这里贴个弹出层的代码

<!--放置弹出层-->
<el-dialog title="分配权限" :visible.sync="showPermissionDialog">
      <!-- 通过ref获取el-tree的实例对象，调用里面的方法，可以获取当前选中的元素 -->
      <el-tree :props="{ label: 'name' }" show-checkbox default-expand-all :data="permissionData"
        :default-checked-keys="permIds" node-key="id" ref="permTree" />
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button type="primary" size="mini" @click="btnPermissionOk">确认</el-button>
          <el-button size="mini" @click="showPermissionDialog = false">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>

2.通过this.$refs获取组件上的方法进行使用

 methods: {
    //角色权限确认按钮
    async btnPermissionOk() {
      //调用接口
      await btnRolePermissionOk({
        id: this.currentRoleId,
        permIds: this.$refs.permTree.getCheckedKeys()
      })
      this.$message.success('角色分配权限成功')
      this.showPermissionDialog = false
    }
 }

总结

使用element-ui组件上的方法，可以用refs来获取
如果我提供的信息有任何错误或不清楚之处，小白难免，请随时指正，我将尽力提供更准确和清晰的解释
正在前进的路上🫡🫡🫡