文章不易，请关注公众号 毛毛虫的小小蜡笔，多多反对，谢谢
起源和问题
在增加主机和批改明码的弹窗中，都有雷同的“测试连通及硬件检测”的性能。
如下截图所示：
目前的实现形式是，别离在两个弹窗中各自写的代码。
那是否抽出来做一个专用的组件呢？
因为测试连通的按钮，点击后执行的代码的确比拟多，大略40行。
尽管能够简略抽出来作为mixin，但如果别的页面也要用呢？
想着还是组件复用度和通用性比拟高，所以就想抽出来做一个专用组件。
代码如下所示：
// html<el-form-item> <el-button class="test" @click="handleClickTestConnectivity" :disabled="testing" :loading="testing">测试连通及硬件检测</el-button> <div v-show="isTestConnectivity" class="tested"> <img :src="checkSvg" class="xuanze" /> 连贯胜利！该主机CPU{{ testConnectivityInfo.cores }}核，内存{{ testConnectivityInfo.memory }}G，硬盘{{ testConnectivityInfo.totalSpace }}G </div> <div v-show="isTestConnectivityFailed" class="testfail">{{ testConnectivityInfo }}</div> </el-form-item> // jshandleClickTestConnectivity() { const params = { 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 = true this.resetCheck() try { const res = await hostService.testConnectivity(params) if (res.code === 0) { this.isTestConnectivity = true this.testConnectivityInfo = res.data } } catch (e) { if (e.data.code === -1) { this.isTestConnectivityFailed = true this.testConnectivityInfo = e.data.message } else { let mes = e.data.message if (!mes) { mes = '服务器外部谬误' } Notification.error({ title: '申请失败', message: mes, position: 'bottom-right' }) } } finally { this.testing = false } } })}剖析
问题1
因为须要点击button才发申请，发申请的代码在子组件外面，但参数（form表单）却在父组件那边。
子组件怎么被动从父组件获取到属性数据？
详情 请查看：毛毛虫的小小蜡笔