在vue中实现重复组件的最佳实践？

Question

我有注册表单，并且我显示密码的工具提示，字段具有相同的逻辑，除了数据和当前数据。

当满足所有要求时，工具提示会隐藏。

我的JS部分：

Vue.component('signup-form', {
  template: '#signup-form',
  data: function () {
    return {
      email: '',
      password: '',
      passwordRepeat: '',

      passwordTip: false,

      passwordContains: {
        minLength: 0,
        letter: 0,
        number: 0,
        symbol: 0
      },
      passwordAllRequirements: false,


      passwordRepeatTip: false,

      passwordRepeatContains: {
        minLength: 0,
        letter: 0,
        number: 0,
        symbol: 0
      },
      passwordRepeatAllRequirements: false

    }
  },
  methods: {
    onSubmit: function () {
      var that = this;

      var dataForm = {};

      dataForm['email'] = that.email;
      dataForm['password'] = that.password;
      dataForm['password-repeat'] = that.passwordRepeat;

      axios.post('/some-url', JSON.stringify(dataForm))
        .then(function (response) {
        console.log(response);
      })
        .catch(function (error) {
        console.log(error);
      })
    },
    passwordTipTrigger: function () {
      this.passwordRepeatTipHide();
      !this.passwordAllRequirements ? this.passwordTip = true : this.passwordTip = false;
    },
    passwordRepeatTipTrigger: function () {
      this.passwordTipHide();
      !this.passwordRepeatAllRequirements ? this.passwordRepeatTip = true : this.passwordRepeatTip = false;
    },
    passwordTipHide: function () {
      this.passwordTip = false;
    },
    passwordRepeatTipHide: function () {
      this.passwordRepeatTip = false;
    },
    logicOfTip: function () {

      var passwordObject = this.passwordContains;

      for (var i in passwordObject) {

        if (passwordObject[i] === 0) {
          this.passwordAllRequirements = false;
          this.passwordTipTrigger();
          break;
        } else {
          this.passwordAllRequirements = true;
          this.passwordTipHide();
        }

      }

      if (this.password.match(/^(?=.*[A-Za-z])/)) {
        this.passwordContains.letter = 1;
      } else {
        this.passwordContains.letter = 0;
      }
      if (this.password.match(/^(?=.*\d)/)) {
        this.passwordContains.number = 1;
      } else {
        this.passwordContains.number = 0;
      }
      if (this.password.match(/^(?=.*[_\W])/)) {
        this.passwordContains.symbol = 1;
      } else {
        this.passwordContains.symbol = 0;
      }
      if (this.password.length >= 8) {
        this.passwordContains.minLength = 1;
      } else {
        this.passwordContains.minLength = 0;
      }

    },
    passwordRepeatLogicOfTip: function () {

      var passwordRepeatObject = this.passwordRepeatContains;

      for (var j in passwordRepeatObject) {

        if (passwordRepeatObject[j] === 0) {
          this.passwordRepeatAllRequirements = false;
          this.passwordRepeatTipTrigger();
          break;
        } else {
          this.passwordRepeatAllRequirements = true;
          this.passwordRepeatTipHide();
        }

      }

      if (this.passwordRepeat.match(/^(?=.*[A-Za-z])/)) {
        this.passwordRepeatContains.letter = 1;
      } else {
        this.passwordRepeatContains.letter = 0;
      }
      if (this.passwordRepeat.match(/^(?=.*\d)/)) {
        this.passwordRepeatContains.number = 1;
      } else {
        this.passwordRepeatContains.number = 0;
      }
      if (this.passwordRepeat.match(/^(?=.*[_\W])/)) {
        this.passwordRepeatContains.symbol = 1;
      } else {
        this.passwordRepeatContains.symbol = 0;
      }
      if (this.passwordRepeat.length >= 8) {
        this.passwordRepeatContains.minLength = 1;
      } else {
        this.passwordRepeatContains.minLength = 0;
      }

    }
  }
});

var app = new Vue({
  el: '#app',
  data: {}
});

我认为我需要再创建一个组件，并将其作为与父表单的连接（双向绑定数据？）进行处理。我不知道如何编码（我是新手）。

完整的工作示例here。

我想要一次使用此代码：

          var passwordObject = this.passwordContains;

          for (var i in passwordObject) {

            if (passwordObject[i] === 0) {
              this.passwordAllRequirements = false;
              this.passwordTipTrigger();
              break;
            } else {
              this.passwordAllRequirements = true;
              this.passwordTipHide();
            }

          }

          if (this.password.match(/^(?=.*[A-Za-z])/)) {
            this.passwordContains.letter = 1;
          } else {
            this.passwordContains.letter = 0;
          }
          if (this.password.match(/^(?=.*\d)/)) {
            this.passwordContains.number = 1;
          } else {
            this.passwordContains.number = 0;
          }
          if (this.password.match(/^(?=.*[_\W])/)) {
            this.passwordContains.symbol = 1;
          } else {
            this.passwordContains.symbol = 0;
          }
          if (this.password.length >= 8) {
            this.passwordContains.minLength = 1;
          } else {
            this.passwordContains.minLength = 0;
          }

另外，我在等待任何建议。感谢名单！