初探Vue的ref（$ref）

1、ref官方文档API
2、我的理解就是ref定义在父组件中，且他有一个名称

<template>
  <div id="app">
    <my-form v-bind:hello="aaa" ref="xxxx">
      <my-form-item ref="ee">
        <my-input placeholder="请输入" ref="ff"></my-input>
      </my-form-item>
    </my-form>
  </div>
</template>

这样在父组件的实例里就存在一个变量vm.$refs，值为

image.png

在父组件中调用

export default {
    mounted(){
      setTimeout(()=>this.$refs.ff.foo('xxss'),1000);
    }
  }

则在对应的子组件中有对应的方法

export default {
    methods: {
        foo(arg){
            console.log('我是foo'+arg)
        }
    }
}

则会执行子组件中的对应方法
so此处的

this.$refs.ff就是my-input组件的Vue实例，可以读取子组件的各种数据和执行方法

3、需要注意的
ref是非相应的
ref如果想是一个变量（for循环中使用），则组要使用:ref="xxx"指定