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,值为
在父组件中调用
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"指定