资讯专栏INFORMATION COLUMN

重新认识vue之 ref

supernavy / 1963人阅读

摘要:引用信息将会注册在父组件的对象上。此时对的认识在于,元素属性写了,则可以通过访问到该元素。其实用在不同位置,访问到的东西是不一样的。也就是说如果用在子组件上,我们还可以通过调用子组件方法。比如前提是这个组件有这个方法。

ref

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。此时对 ref 的认识在于,元素属性写了 refs, 则可以通过 this.$refs 访问到该元素。其实ref 用在不同位置,访问到的东西是不一样的。

ref 在子组件上

如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例。
也就是说 如果ref 用在子组件上,我们还可以通过 this.$refs.xxx 调用子组件方法。比如 this.$refs.pointdDetailChart(param) ,前提是 这个组件有这个方法。

ref 注册时间

因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs 也不是响应式的,因此你不应该试图用它在模板中做数据绑定。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/97180.html

相关文章

  • Reactjs vs. Vuejs

    摘要:上图是二月份前端框架排名,位居第一,排名第三。我们认为前端模板和组件代码是紧密相连的。直到最近看了文档,才发现另有蹊跷。 欢迎大家关注腾讯云技术社区-segmentfault官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 纪俊,从事Web前端开发工作,2016年加入腾讯OMG广告平台产品部,喜欢研究前端技术框架。 这里要讨论的话题,不是前端框架哪家强,因为在 Vue 官网就已经...

    AaronYuan 评论0 收藏0
  • 重新认识vue事件阻止冒泡

    摘要:通用解决办法事件冒泡了嘛,那就阻止事件冒泡呗。很完美有没有,这就不用在事件响应逻辑中去处理事件细节了。 冒泡的表现 近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示: showImg(https://segmentfault.com/img/remote/1460000015852878?w=1962&h=392); 他们的...

    marek 评论0 收藏0
  • Vue全栈开发百度贴吧

    这个百度贴吧的项目是 vue + koa + sequelize 的项目。 由于没有百度贴吧API接口,所以自己写了后端 项目部分截图(GIF) showImg(https://user-gold-cdn.xitu.io/2019/7/13/16bea513a0805b84?w=480&h=1040&f=gif&s=4456077);showImg(https://user-gold-cdn.xi...

    stefanieliang 评论0 收藏0
  • vue的diff算法学习

    摘要:源码地址虚拟算法首先要明确一个概念就是的对象是虚拟,更新真实则是算法的结果基类。。。 源码地址 虚拟dom diff算法首先要明确一个概念就是diff的对象是虚拟dom,更新真实dom则是diff算法的结果 Vnode基类 constructor ( 。。。 ) { this.tag = tag this.data = data this.chil...

    MartinHan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<