vue中ref两种用法

在Vue中，ref可以用于两种不同的场景：

1. 给DOM元素或组件命名

在模板中使用ref可以给DOM元素或组件命名，然后在Vue实例中使用$refs来访问这些DOM元素或组件。

例如，我们可以给一个input元素命名为"myInput"，然后在Vue实例中通过$refs来访问这个元素：

<template>
  <input ref="myInput" type="text">
</template>

export default {
  mounted() {
    this.$refs.myInput.focus()
  }
}

2. 在子组件中访问父组件

在子组件中使用ref可以访问父组件的方法或属性，这种用法一般用于子组件需要与父组件进行通信的场景。

例如，我们可以在父组件中定义一个方法，然后在子组件中使用ref来访问这个方法：

<template>
  <my-component ref="myComponent"></my-component>
</template>

export default {
  methods: {
    hello() {
      console.log('Hello from parent component!')
    }
  },
  mounted() {
    this.$refs.myComponent.sayHello()
  }
}

export default {
  methods: {
    sayHello() {
      this.$parent.hello()
    }
  }
}