关于vue组件的一点探索和思考
文章不易，请关注公众号毛毛虫的小蜡笔，多多支持，感谢出处和提问在弹窗添加一台主机和更改密码，同样有“测试连通性和硬件检测”功能。如下截图所示：目前的实现方式是分别在两个弹窗中编写代码。是否可以将其提取为公共组件？因为有测试连接的按钮，所以点击后执行的代码确实不少，大约40行。虽然它可以很容易地提取为mixin，但如果其他页面也需要使用它怎么办？想到组件复用性和通用性比较高，所以想把它拿出来做一个公共组件。代码如下：//html测试连通性和硬件检测连接成功！主机CPU{{testConnectivityInfo.cores}}核，内存{{testConnectivityInfo.memory}}G，硬盘{{testConnectivityInfo.totalSpace}}G
{{testConnectivityInfo}} //jshandleClickTestConnectivity(){constparams={hostIp:this.form.hostIp,sshPort:this.form.sshPort,sshAccount:this.form.sshAccount,sshPasswd:this.form.sshPasswd}this.$refs.form.validate(async(valid)=>{//验证通过，当前没有测试任务if(valid&&!this.testing){this.testing=truethis.resetCheck()try{constres=awaithostService.testConnectivity(params)if(res.code===0){this.isTestConnectivity=truethis.testConnectivityInfo=res.data}}catch(e){if(e.data.code===-1){this.isTestConnectivityFailed=truethis.testConnectivityInfo=e.data.message}else{让mes=e.data.messageif(!mes){mes='Internalservererror'}Notification.error({title:'Requestfailed',message:mes,position:'bottom-right'})}}finally{this.testing=false}}})}分析问题1因为你需要向点击按钮发送请求。发送请求的代码在子组件中，但是参数（表单）在父组件中。子组件如何主动从父组件获取属性数据？详情请查看：毛毛虫的小蜡笔
