vue ref和$refs 获取元素dom、获取子组件数据与方法

在Vue中，ref是一个特殊的属性，它可以用来访问组件实例或DOM元素。$refs是一个对象，包含所有带有ref属性的DOM元素和子组件的引用。

获取DOM元素：

<template>
  <div>
    <input ref="inputRef" type="text">
    <button @click="focusInput">Focus Input</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    focusInput() {
      this.$refs.inputRef.focus();
    }
  }
}
</script>

获取子组件数据和方法：

<template>
  <div>
    <child-component ref="childRef"></child-component>
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.childRef.childMethod();
    }
  }
}
</script>

在子组件ChildComponent.vue中：

<template>
  <div>Child Component</div>
</template>
 
<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method called');
    }
  }
}
</script>

请注意，应谨慎使用$refs，因为它会使组件的依赖关系变得不明确，并且在某些情况下可能导致问题，特别是在使用Vue的服务器端渲染时。在正常的DOM操作中，尽量使用Vue的响应式系统来处理DOM更新。