本示例基于vue2+element-ui，介绍vue中 $parent、$children、$refs关于父子组件传值的用法。

使用场景

$refs：父组件访问子组件

如果在普通的DOM元素上使用，引用指向的是DOM元素；如果用在子组件上，引用的是组件实例$parent：子组件访问父组件$children：父组件访问子组件

文件结构

 示例一：$parent  子组件获取父组件的数据、调用父组件的方法

父组件

子组件

示例二：$children   父组件获取子组件的数据、调用子组件的方法

父组件

子组件

示例三：$refs   父组件获取子组件的数据、调用子组件的方法

// 获取子组件的数据

const child_val = this.$refs.mes.form;

// 调用子组件的方法

this.$refs.mes.fun();

$ref的用法与$children的方法相同，只需要将 children[0] 换成 $refs.mes 即可。

注意：

根据动图可以看见一个现象，改变姓名(input)、内容(textarea) 的值，表格的值也跟随改变。

解决方法：将应用的值深拷贝

相关文章

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。