Vue中ref的用法及演示

下面是“Vue中ref的用法及演示”的完整攻略。

一、什么是Vue中的ref

ref 是 Vue 提供的一个属性，可以用来给元素或组件注册引用信息。比如，渲染后，我们可以使用$refs来访问这个元素。

二、Vue中ref的用法

1. 绑定ref

我们对组件(或元素)绑定ref属性，Vue将会提供一个组件实例(或元素)的引用，我们在组件内可以使用 this.$refs.xxx 来访问这个被绑定的组件实例(或元素)。

2. 获取组件实例及操作属性方法与事件

显然，使用 Vue 组件都不是直接操作 DOM 节点，而是使用并操作组件内部的属性、方法和事件等。通过ref，我们可以获取到组件的实例，从而操作组件的属性和方法或者监听组件的事件等。

3. 获取元素对象并操作元素属性

对于DOM元素，我们可以在绑定ref的同时为其指定一个对应的变量名，然后使用Vue提供的$refs对象来访问这个元素，进而对该元素进行操作。

三、示例演示

1. 获取子组件并调用方法

例如，我们有一个父组件 App 和一个子组件 Son，我们可以先在子组件上绑定ref="mySon"，然后在父组件中，通过this.$refs.mySon来获取Son组件实例，从而调用Son中的方法或者修改Son中的数据。

代码演示：

<template>
  <div>
    <son ref="mySon"></son>
    <button @click="changeMySonText">修改子组件中的数据</button>
  </div>
</template>

<script>
import Son from './Son.vue' // 子组件

export default {
  components: {
    Son
  },
  methods: {
    changeMySonText () {
      this.$refs.mySon.foo = '修改后的文字'
    }
  }
}
</script>

<template>
  <div>
    {{foo}}
  </div>
</template>

<script>
export default {
  data () {
    return {
      foo: '原始文字'
    }
  }
}
</script>

上述代码中，我们在父组件中通过this.$refs.mySon获取到了子组件实例，然后对子组件中的数据进行了修改，并实现了数据的双向绑定。

2. 获取DOM节点并操作元素属性

下面，我们以改变按钮文字为例，介绍获取DOM节点并操作元素属性。

代码演示：

<template>
  <div>
    <button ref="myButton" @click="changeMyButtonText">按钮</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeMyButtonText () {
      this.$refs.myButton.innerText = '修改后的文字'
    }
  }
}
</script>

上述代码中，我们在按钮上绑定了ref="myButton"，然后在方法中通过this.$refs.myButton获取到了按钮元素，然后修改了其innerText属性，实现了元素的动态更新。