ref 常见使用场景（个人见解）

ref 常见使用场景：

(一) Form 表单：

<el-form :model="form" size="medium" :rules="rules" ref="form">
    。。。
</el-form>
<div slot="footer" class="dialog-footer" style="text-align: right;">
    <el-button @click="handleClose('form')">取 消</el-button>
    <el-button type="primary" @click="handleOk('form')">确 定</el-button>
</div>

handleOk 事件：

handleOk(formName) {
  this.$refs[formName].validate((valid) => {
    if (valid) {
      // 表单验证通过之后的操作
    } else {
      console.log('error submit!!');
      return false;
    }
  });
},

handleClose 事件：

handleClose(formName) {
    this.$nextTick(() => {
        this.$refs[formName].resetFields();
    });
},

（二）Tree 树形控件:

<el-tree
  style="height: 300px; overflow-y: scroll;"
  :data="permission"
  show-checkbox
  default-expand-all
  node-key="id"
  ref="tree"
  highlight-current
  :props="defaultProps">
</el-tree>

获取节点和设置节点用：getCheckedKeys 和 setCheckedKeys。element-ui 树型控件

添加时，获取已选择的节点

create() {
    console.log('create', this.$refs.tree.getCheckedKeys())
    this.form.list = this.$refs.tree.getCheckedKeys()
}

修改时，查询出可以已选中的。

addRoles(type, val) {
    if(val){
      let list = []
      val.permissions.forEach(item => {
        list.push(item.id)
      })
      this.$nextTick(() => {
          this.$refs.tree.setCheckedKeys(list)
      });
    }
},

（三）子组件控件：参考 子组件 Refs

父组件：

需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 特性为这个子组件赋予一个 ID 引用。

<base-input ref="usernameInput"></base-input>

你可以使用：this.$refs.usernameInput 来访问这个 <base-input> 实例。

更多查看vue 父组件与子组件传值

（四）ref 是什么？

官网是这样描述ref 的：ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。

（1）在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；

（2）用在子组件上，引用就指向组件实例

案例：

<!-- `vm.$refs.p` will be the DOM node -->
<p ref="p">hello</p>

<!-- `vm.$refs.child` will be the child component instance -->
<child-component ref="child"></child-component>

注意：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定，避免在模板或计算属性中访问 $refs。