vue:ref的作用和使用方法

ref属性相当于给标签设置了一个ID,可以使用该特殊标识来进行一些DOM的操作,但是使用的时候有如下几个注意事项:

  • ref属性值绑定元素都是唯一的,如果一个ref属性绑定了多个dom节点,那么这个ref属性将会默认绑定到最后设置该ref属性值的DOM节点。
  • 使用时不是直接this.ref值进行访问DOM节点,而是需要通过this.refs['children']进行访问DOM节点,因为vue会将实例中所有的ref属性值都保存到vue实例的,refs属性内。
  • 所有的ref属性进行的操作都不是响应式的,所以避免在计算属性(Computed),和模板({{}})中使用ref属性。
  • ref功能还是比较强大的,可以通过ref去调用子组件的方法和data里面的变量,当然调用的时候还是需要使用到nextTick这个全局函数的,vue的生命周期的限制,如果不使用nextTick可能会导致undefined也可能会报错
<template>
  <div>
    <children ref="children"/>
  </div>
</template>
<script>
// 子组件
import children from '@/views/salesManagement/children.vue' //子组件所在路径

export default {
  components: {
    children,
  }, //初始化组件
  data() {
    return {
      
    }
  },
  methods: {
    demo() {
      this.$nextTick(() => {
        this.$refs['children']//这里可访问子组件的实例和方法
      })
    },
  },
}
</script>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 12,118评论 0 25
  • 问题:在vue父子组件传值过程中,使用ref去调用子组件方法,没有在子组件中使用watch监听来调用调用子组件方法...
    有你有团阅读 11,338评论 0 3
  • 介绍 2020年9月19日凌晨,尤雨溪大大正式发布了 Vue.js 3.0 版本,代号:One Piece。此框架...
    c小刺猬阅读 38,846评论 0 10
  • 表情是什么,我认为表情就是表现出来的情绪。表情可以传达很多信息。高兴了当然就笑了,难过就哭了。两者是相互影响密不可...
    Persistenc_6aea阅读 128,003评论 2 7
  • 16宿命:用概率思维提高你的胜算 以前的我是风险厌恶者,不喜欢去冒险,但是人生放弃了冒险,也就放弃了无数的可能。 ...
    yichen大刀阅读 11,333评论 0 4

友情链接更多精彩内容