### 解决 `template ref` 非引用值错误 当遇到 `Template ref 'ruleForm' 在非引用值上使用的报错问题` 时，通常是因为模板中的 `ref` 属性绑定到了一个未被声明为响应式的变量。为了确保 `ref` 正确工作并避免生产构建时报错，可以采取以下措施： #### 使用 `provide/inject` 如果需要跨多个组件传递 `ref`，考虑使用 Vue 的依赖注入机制来提供和注入 `ref`。 ```javascript // ParentComponent.vue export default { provide() { return { ruleFormRef: this.ruleFormRef, }; }, data() { return { ruleFormRef: null, }; }, }; ``` ```html <!-- ChildComponent.vue --> <template> <div> <!-- 绑定到本地数据属性 --> <el-form ref="localRuleForm"> ... </el-form> </div> </template> <script> import { inject } from "vue"; export default { setup() { const localRuleForm = inject("ruleFormRef"); onMounted(() => { // 初始化赋值给外部提供的ref localRuleForm.value = this.$refs.localRuleForm; }); return {}; } } </script> ``` #### 响应式处理 Refs 确保任何通过 `ref` 获取的 DOM 节点或子组件实例都存储在一个响应式的数据属性中，而不是直接作为局部常量或其他非响应式结构的一部分[^1]。 ```javascript data() { return { formInstance: null, // 存储表单实例 }; }, mounted() { this.formInstance = this.$refs.ruleForm; // 将ref指向的对象存入data内 }, methods: { submitForm() { this.formInstance.validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); } } ``` #### 模板编写注意事项 在模板中定义 `ref` 时，应该始终将其关联至组件内部的一个已知且有效的 JavaScript 变量名。这可以通过将 `ref` 设置为目标元素或子组件上的唯一标识符实现，并随后在脚本部分访问该标识符对应的节点或组件实例[^3]。 ```html <el-form :model="ruleForm" status-icon :rules="rules" ref="formInstance">...</el-form> <button @click="handleSubmit">Submit</button> ```