需求是弹箱，弹箱里有很多内容，所以可以用组件完成。可以看到下图。画中有很多折叠面板。目前，每个折叠面板都是一个组件，需要提交一些面板下组件的数据。

此时，需要获取子组件下的数据。最常用的方法是调用子组件函数。有关详细信息，请参阅vue和js版本的父组件如何直接调用子组件的函数。对于正常的js，请将ref值绑定到组件，然后输入this .$refs。子组件ref值。通过子组件方法

中点：可以调用子组件中的函数，以便从子组件函数中重新获取所需的数据返回。

例如：

页面中引入了组件，并通过ref绑定。(Vue Ts表示法有差异，可以看到底部。）

Template

迪布

单击button @ click=' parent click '/button

使用Child ref='mychild'///组件标签

/div

/template

脚本(脚本)

" Import Child from "。/child '；//导入子组件Child

Export default {

Name: 'parent '，

Components: {

将Child //组件隐藏为标签

}，

Methods: {

ParentClick() {

This。$refs.mychild.childClick('你父亲传给你的')；//调用子组件的方法childClick

}

}

}

/脚本

子组件的childClick函数被调用。

Template

迪布

/childComponent

/div

/template

脚本(脚本)

Export default {

Name: 'child '，

Methods: {

ChildClick(e) {

Console.log(e) //其中，您可以将本节中的数据return返回到父级，如return this.tableData。

}

}

}

/脚本

TS中的表示法避免语法报告错误

(this.$ refs。my child as any)。Child Click(‘你父亲传给你的’)；

其中closeAll1是子组件的引用绑定值，closeClick是子组件的方法，可以引用js版本。