关于vue.js:vue组件的一点探索和思考

文章不易，请关注公众号 毛毛虫的小小蜡笔，多多反对，谢谢

起源和问题

在增加主机和批改明码的弹窗中，都有雷同的“测试连通及硬件检测”的性能。

如下截图所示：

目前的实现形式是，别离在两个弹窗中各自写的代码。

那是否抽出来做一个专用的组件呢？

因为测试连通的按钮，点击后执行的代码的确比拟多，大略 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>
    
// js
handleClickTestConnectivity() {
  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 表单）却在父组件那边。

子组件怎么被动从父组件获取到属性数据？

详情 请查看：毛毛虫的小小蜡笔