vue中ref的用法

在Vue中，ref是一个用于在模板或者组件中获取元素或组件实例的特殊属性。通过ref属性，我们可以在Vue实例中直接访问到DOM元素或者组件实例，从而可以进行一些操作或者获取一些信息。

使用ref属性的方法很简单，只需要在需要获取的元素或组件上添加ref属性，并给它一个唯一的名称。例如：

`html

在上面的代码中，我们给input元素添加了ref属性，并设置为"myInput"。接下来，在Vue实例中，我们可以通过this.$refs来访问到这个元素：
`javascript

在上面的代码中，我们通过this.$refs.myInput.value获取到了输入框的值，并弹出了一个提示框显示该值。

除了获取DOM元素的值，ref还可以用于获取组件实例。例如，我们有一个子组件ChildComponent，并想在父组件中访问到它的实例：

`html

在上面的代码中，我们给ChildComponent组件添加了ref属性，并设置为"child"。接下来，在Vue实例中，我们可以通过this.$refs来访问到这个组件的实例：
`javascript

在上面的代码中，我们通过this.$refs.child来访问到子组件的实例，并调用了它的someMethod方法。

需要注意的是，当在组件上使用ref属性时，获取到的是组件实例而不是DOM元素。如果想要获取组件内的DOM元素，可以使用ref属性配合$refs来获取。例如，在ChildComponent组件中有一个带有ref属性的元素：

`html

在父组件中，可以通过this.$refs.child.$refs来访问到子组件内的DOM元素：
`javascript

在上面的代码中，我们通过this.$refs.child.$refs.myParagraph来获取到子组件内的p元素，并打印出了它的innerText。

总结一下，ref是Vue中用于获取元素或组件实例的属性。通过在元素或组件上添加ref属性，并给它一个唯一的名称，我们可以在Vue实例中通过this.$refs来访问到这些元素或组件实例，从而进行一些操作或者获取一些信息。