Vue3入门基础语法：ref的使用

2023-04-24 15:00:44

## Vue 3 中的 ref：简化响应式数据引用

## 引言

Vue.js 3 引入了 ref 特性，为响应式数据引用提供了更直观、更强大的方式。本文将深入探讨 ref 的使用方法，并展示如何在各种场景中利用它。

## ref 的基本用法

ref 允许我们在 setup 方法中定义响应式数据引用。例如：

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    return {
      count
    }
  }
}

在模板中，我们可以使用 ref 变量直接绑定数据：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

点击按钮时，count 的值会增加，视图将自动更新。

## ref 的高级用法

ref 的用途远不止于基本数据引用。它还可用于更高级的场景，例如：

1. 访问元素引用：

const inputRef = ref()

export default {
  setup() {
    return {
      inputRef
    }
  },
  mounted() {
    this.inputRef.value.focus()
  }
}

2. 动态属性绑定：

<template>
  <div :class="classRef">
    ...
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const classRef = ref('active')

    return {
      classRef
    }
  }
}
</script>

3. 组件通信：

// 父组件
export default {
  setup() {
    const childRef = ref()

    return {
      childRef
    }
  },
  methods: {
    callChildMethod() {
      this.childRef.value.childMethod()
    }
  }
}

// 子组件
export default {
  setup() {
    return {
      childMethod() {
        console.log('Child method called!')
      }
    }
  }
}