初探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"指定

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 以下内容是我在学习和研究Vue时,对Vue的特性、重点和注意事项的提取、精练和总结,可以做为Vue特性的字典; 1...
    科研者阅读 14,153评论 3 24
  • 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装...
    youins阅读 9,533评论 0 13
  • Vue组件的通信方式大致有这11(12)种 常用的Props $attrs & $listeners provid...
    zpkzpk阅读 1,067评论 0 3
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,246评论 0 6
  • 风闹江边树影疏,骚人不忌唱犹哭。 云容水中更堪赏,志寄歌怀只作呜。 天暗灯残人渐散,影孤行单恨当初? 可怜世事由人...
    徐一村阅读 1,531评论 1 12