Vue3 ref属性

ref=“formRef” 的作用

在Vue.js中，ref属性提供了一个方式来注册和访问组件内的子组件或者DOM元素。当你给一个元素或者子组件添加ref="formRef"时，你就可以在Vue组件实例中通过this.$refs.formRef来访问这个元素或子组件的实例。
以下是ref="formRef"的一些具体作用：

访问DOM元素

如果你将ref属性添加到一个原生DOM元素上，你可以通过this.$refs.formRef直接访问到这个DOM元素，进而可以执行DOM操作。

<template>
  <div>
    <input ref="formRef" type="text">
  </div>
</template>
<script>
export default {
  mounted() {
    this.$refs.formRef.focus(); // 访问input元素并聚焦
  }
}
</script>

访问子组件实例

如果你将ref属性添加到一个子组件上，你可以通过this.$refs.formRef访问到这个子组件的实例，进而可以调用子组件的方法或访问其数据。

<template>
  <div>
    <child-component ref="formRef"></child-component>
  </div>
</template>
<script>
export default {
  mounted() {
    this.$refs.formRef.someMethod(); // 调用子组件的someMethod方法
  }
}
</script>

在表单中使用

在你提供的表单示例中，ref="formRef"可以用于访问表单组件实例，以便进行表单验证、获取表单数据等操作。

<template>
  <Form ref="formRef" :model="form" :rules="rules">
    <!-- 表单项 -->
  </Form>
  <button @click="submitForm">提交</button>
</template>
<script>
export default {
  methods: {
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          alert('验证成功!');
        } else {
          alert('验证失败!');
        }
      });
    }
  }
}
</script>

在这个例子中，this.$refs.formRef.validate是调用表单组件的validate方法来执行表单验证。
总之，ref="formRef"为你在Vue组件内部提供了一个引用，使得你可以方便地访问和操作特定的DOM元素或子组件实例。

在Vue 3中ref的使用有何变化？

在Vue 3中，ref的使用方式有一些变化，主要体现在以下几个方面：

1. Composition API中的ref

Vue 3引入了Composition API，它是Vue的新特性，旨在更好地逻辑复用和组织代码。在Composition API中，ref是一个函数，用于创建一个响应式的引用对象。

import { ref } from 'vue';
const count = ref(0);

这里，count是一个响应式的引用，它有一个.value属性，该属性是响应式的。

2. 访问ref的值

在Vue 3中，当你创建了一个ref，你需要通过.value属性来访问或修改它的值。

console.log(count.value); // 输出：0
count.value++; // 修改ref的值

3. ref在模板中的自动解包

尽管在JavaScript中你需要通过.value来访问ref的值，但在Vue 3的模板中，Vue会自动为你解包ref，所以你不需要显式地写.value。

<template>
  <div>{{ count }}</div> <!-- 这里的count会自动解包 -->
</template>

4. ref和reactive

Vue 3还引入了reactive函数，用于创建一个响应式的对象。与ref不同，reactive不需要通过.value来访问属性，而是直接访问对象的属性。

import { reactive } from 'vue';
const state = reactive({ count: 0 });
console.log(state.count); // 输出：0

5. ref在setup函数中使用

在Vue 3的setup函数中，你可以定义ref，并在模板中使用它们。

export default {
  setup() {
    const count = ref(0);
    // ...
    return { count };
  }
}

6. ref和shallowRef

Vue 3还提供了shallowRef，它创建一个跟踪自身.value变化的ref，但不使其值成为响应式的。

总结

Vue 3中的ref主要变化如下：

• ref现在是一个函数，用于创建响应式引用。
• 在JavaScript中访问ref的值需要通过.value属性。
• 在模板中，Vue会自动解包ref，不需要显式地写.value。
• ref可以在setup函数中使用，并与reactive结合使用来构建复杂的响应式状态。
  这些变化是Vue 3为了提供更灵活、更高效的响应式系统而做的优化。

示例

在 Vue 中，ref 是一个特殊的属性，用于给元素或子组件注册引用信息。在这个例子中，ref=“formRef” 的主要作用是：
创建对表单的引用：它为 组件创建了一个引用，使我们能够在 JavaScript 代码中直接访问这个表单组件实例。
访问表单方法：通过这个引用，我们可以调用 Element Plus 的 Form 组件提供的方法，如 validate() 和 resetFields()。
与 setup 中的 ref 对应：在

<template>
  <div>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="品种" prop="kind">
        <el-input v-model="form.kind"></el-input>
      </el-form-item>
      <el-form-item label="名字" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="颜色" prop="color">
        <el-input v-model="form.color"></el-input>
      </el-form-item>
      <el-form-item label="图片链接" prop="imageUrl">
        <el-input v-model="form.imageUrl"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const formRef = ref(null)

const form = reactive({
  kind: '',
  name: '',
  color: '',
  imageUrl: ''
})

const rules = {
  kind: [{ required: true, message: '请输入品种', trigger: 'blur' }],
  name: [{ required: true, message: '请输入名字', trigger: 'blur' }],
  color: [{ required: true, message: '请输入颜色', trigger: 'blur' }],
  imageUrl: [{ required: true, message: '请输入图片链接', trigger: 'blur' }]
}

const save = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log('保存表单数据:', form)
      // 这里可以添加发送数据到服务器的逻辑
      ElMessage.success('表单保存成功！')
    } else {
      ElMessage.error('请正确填写表单！')
      return false
    }
  })
}

const cancel = () => {
  formRef.value.resetFields()
  ElMessage.info('表单已重置')
}
</script>

在这里，formRef.value.validate() 调用了表单的验证方法，formRef.value.resetFields() 调用了表单的重置方法。
总的来说，ref=“formRef” 为我们提供了一种方式来在 JavaScript 代码中操作和控制表单组件，使我们能够进行表单验证、重置等操作。这是 Vue 中实现模板和 JavaScript 代码之间通信的一种重要机制。