insideBa11个人空间

# 5.ref

用于选择html元素或者组件

<template>
  <div id="app">
    <child ref="child" name="muggle" :age="17"/>
    <span ref="span"></span>
  </div>
</template>

<script>
import child from './components/TestVue'

export default {
  name: 'App',
  components: {
    child,
  },
  methods: {
    logRef() {
      console.log(this.$refs.child); // VueComponent
      console.log(this.$refs.span); // <span></span>
    }
  },
  mounted() {
    this.logRef()
  }
}
</script>

# ref常见面试题

  1. ref属性在Vue中如何使用和作用是什么？

    Vue中的ref属性用于获取DOM元素或子组件的引用。在 Vue 中，在任何组件的实例上，你都可以访问到其 $refs 属性，用以访问到绑定了 ref 的元素和组件。

  2. ref和$parent/$children有何不同？它们各自在什么情况下使用？

    ref是用来获取当前实例或子元素的引用，而$parent和$children则是作为直接父子组件的引用。如果你想要在父组件中直接访问子组件，则使用this.$refs.refName。 然而，如果你想要满足更复杂的场景，如访问父组件或所有子组件，则可以使用$parent和$children。但请注意，Vue官方并不推荐直接通过这种方式来进行父子组件通信。

  3. 如何使用ref在父组件中调用子组件的方法或访问其数据？

    在子组件中定义ref属性后，如<child-component ref="child"/>，在父组件中就可以通过this.$refs.child来访问子组件的数据和方法。

  4. 在Vue中，什么情况下我们将优先选择使用ref而不是其他方式进行组件间通信？

    当你需要在父组件中直接访问子组件的方法或html的api时，应优先选择使用 ref。然而，也要注意的是，滥用ref可能会使得组件之间的解耦变得困难。

  5. ref是否可以在模板中使用？如果可以，为何不推荐频繁使用？

    ref可以在模板中使用，但是Vue官方并不推荐过度使用。因为这可能会导致代码逻辑变得密集，增加了理解和维护的难度，降低了代码的可读性。另外，ref在循环（v-for）中使用时，会获取到一个数组，而非单个元素引用，这也是需要特别注意的地方。

← 6.props →