Vue中ref和$refs的介绍以及使用方法示例

本是古典何须时尚 2023-01-18 02:25 162阅读 0赞

一、在JavaScript中需要通过document.querySelector("\#demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this.$refs即可调用，这样可以减少获取dom节点的消耗。

二、ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向该子组件实例

通俗的讲，ref特性就是为元素或子组件赋予一个ID引用,通过this.$refs.refName来访问元素或子组件的实例

三、this.$refs是一个对象，持有当前组件中注册过 ref特性的所有 DOM 元素和子组件实例

**注意：** $refs只有在组件渲染完成后才填充，在初始渲染的时候不能访问它们，并且它是非响应式的，因此不能用它在模板中做数据绑定

例子

<template>
      <div class="hello">
        <test ref="testDom" @refresh="getdata" ></test>
        <button @click="getTest">节点</button>
      </div>
    
    </template>
    <script type="text/javascript">
      import test from '@/components/testref'
    
      export default{
        components: {
          test
        },
        data () {
          return {
            mgs: ''
          }
        },
    
        methods: {
          getTest () {
          this.$refs.testDom.getTest1()
          },
          getdata () {
            console.info("11")
          }
        }
      }
    
    </script>

<template>
      <div class="hello">
        test
      </div>
    
    </template>
    <script type="text/javascript">
    
      export default ({
        data () {
          return {
            mgs: ''
          }
        },
        methods: {
          getTest1 () {
            console.info('1212')
            this.$emit('refresh')
          }
        }
      })
    
    </script>