Vue进阶（幺贰零）：父组件获取子组件验证结果

文章目录

一、前言
二、代码实现
三、拓展阅读

一、前言

在开发Vue项目过程中，代码复用之自定义组件是常做事情。当子组件为form表单的时候，父组件需要获取子组件（表单）的验证结果。

尽管有 prop 和事件，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。通过这种方式，便可以在父组件中调用子组件方法！

二、代码实现

子组件

<template><div><el-form :model="aForm" :rules="aRules" ref="aForm"><el-form-item label="名称" prop="name"><el-input v-model="aForm.name"></el-input></el-form-item><el-form-item label="年龄" prop="age"><el-input v-model="aForm.age"></el-input></el-form-item></el-form></div>
</template><script>export default {name: 'A',data() {return {aForm: {name: '',age: ''},aRules: {name: [{ required: true, message: '请输入名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],}}},methods: {validateForm() {let flag = falsethis.$refs['aForm'].validate((valid) => {flag = valid})return flag}}}
</script>

父组件

<template><div><A ref="a"></A><el-button @click="save">保存</el-button></div>
</template><script>import A from './a.vue'export default {name: 'child-component-validate',data() {return {}},methods: {save() {console.log(this.$refs['a'].validateForm())}},components: {A}}
</script>

当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。

关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 因为它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

三、拓展阅读

《Vue进阶（幺幺玖）：element-ui table组件适应性问题（横向滚动条）》

Vue进阶（幺贰零）：父组件获取子组件验证结果相关推荐

jquery查找父窗体id_Vue父组件获取子组件中的变量
全世界只有不到3 % 的人关注了我你真是个特别的人在vue项目日常开发中,难免要把功能性组件抽离出来,这样结构就会出现父子组件,兄弟组件等,但是这样就会涉及到不同组件需要互相使用其中的某个值的问题 ...
微信小程序——1、自定义顶部渐变色2、封装好的自定义顶部栏（父组件获取子组件的点击事件）
1.自定义顶部渐变色第一种使用代码实现渐变效果图: .json代码 "navigationStyle":"custom" .wxml代码 <view ...
vue/uniapp父组件获取子组件内的数据或方法
1.父组件主动获取子组件中的数据和方法在父组件里面通过: ``` this.$refs.childMethod.属性 this.$refs.childMethod.方法 ``` 在父组件中:(调用子 ...
angular使用@viewChild父组件获取子组件的数据和方法
一. 父组件通过局部变量获取子组件的引用 ,主动获取子组件的数据和方法 1. 使用#给子组件命名为#footer <app-footer #footer></app-footer ...
子组件向父组件传值，父组件获取子组件值
子组件如何传值给父组件? 父组件将一个方法赋值给一个属性props传递给子组件,子组件在函数被应用时调用父组件传来的属性并传值,父组件可在自身的函数中接受子组件传递过来的值. 父组件 //father ...
rn 函数式组件获取子组件的实例
class式组件要获取子组件的实例只要用ref就可以了,但是函数式组件就要复杂一点函数式组件要给子组件直接绑定ref是不成功的,要求子组件使用forward创建才可以,如下 const ChildR ...
Vue进阶（贰零柒）：Webpack 性能优化措施汇总
文章目录一.前言二.优化方案 2.1 优化 Loader 2.2 DllPlugin 2.3 代码压缩 2.4 一些小的优化点 2.5 减少 Webpack 打包后的文件体积 2.5.1 按需加载 ...
Vue进阶（贰零叁）：iframe嵌套页面IE不展示问题解决
文章目录一.前言二.问题分析三.解决方法四.拓展阅读一.前言在前期博文<Vue进阶(六十四):iframe更改src后页面未刷新问题解决>中讲解了iframe更改src后页面未 ...
antd如何获取表单的值_antd 父组件获取子组件中form表单的值
还是拿代码来讲吧,详情见注释子组件 import React, { Component } from 'react'; import { Form, Input } from 'antd'; con ...