首页 文章

如何在vue.js 2.0中公开组件的属性

提问于
浏览 次
0

我在想如何在vue.js组件上实现验证 .

最初的想法是组件验证并返回错误代码，例如：“require”，“min”，“max”等 . 另一个组件将根据此错误代码显示全文消息 .

因为错误消息可能不会始终显示在组件的模板中 . 我需要两个独立的组件 .

伪代码是这样的 .

<div>
<mycomponent ref="salary" errcode="ErrorCode"></mycomponent>
</div>
.....
<div>
<errormessage watchcomponent="salary" message="salaryErrorMessages"></errormessage>
</div>

salaryErrorMessages是代码和消息的哈希 . 例如：{“require”：“请输入薪水”，“min”：“最低工资值为10000”}

Vue对组件有ref属性 . 我不知道是否可以使用ref引用属性中的组件 .

我考虑的其他方案：

  • 在页面模型中添加错误对象，并传递给using：sync binding . 可以监视同一个对象 . 这需要在模型中声明错误消息 .

如果我考虑要求页面还需要知道在回发之前是否有错误 . 可能需要全局错误对象 .

  • 使用事件总线或Vuex . 这似乎是官方解决方案，但我不知道 .

当页面有多个实例时，它们将触发相同的事件 . 所有实例都将监视同一事件 .

vue.js

2 回答

  • 0

    你的工作倒退了 . Vue是关于将数据从父级传递给子级，而不是将子属性公开给父组件 .

    在页面模型中添加错误对象，并传递给using：sync binding . 可以监视同一个对象 . 这需要在模型中声明错误消息 .

    sync 已从Vue v2中消失，但这个想法基本上是正确的：父组件包含一个对象，子组件作为道具传递它的块，父对象在子组件中更改时自动在父组件中更新 . 它不必是根组件 .

    使用事件总线或Vuex . 这似乎是官方解决方案，但我不知道 .

    如果您的应用程序需要管理许多与状态相关的恶作剧，那么Vuex几乎总是正确的解决方案 .

    当页面有多个实例时，它们将触发相同的事件 . 所有实例都将监视同一事件 .

    Vue会频繁地污染你的控制台，警告是data must be a function . 这就是为什么！

    这是一个精简版，真是可耻的黑客，我最近为熟人做了一个熟人：

    在我的辩护中，把东西放在 __proto__ 是一种非常快速的方法，使它们不可枚举 .

    Vue.component('error', {
  template: '#error',
  props: ['condition', 'errorMessage']
})

Vue.component('comp', {
  template: '#comp',
  props: ['errorMessage', 'model'],
})

Vue.component('app', {
  template: '#app',
  data() {
    return {
      models: {
        nameForm: {
          firstName: '',
          lastName: '',
          __proto__: {
            validator: function(value) {
              return _(value).every(x => x.length > 2)
            }
          }
        },
        otherForm: {
          notVeryInterestingField: 'There are words here',
          veryImportantField: 0,
          __proto__: {
            validator: function(value) {
              return value.veryImportantField > 20
            }
          }
        },
        __proto__: {
          validator: function(value) {
            return _(value).every(x => x.validator(x))
          }
        }
      }
    }
  }
})

const vm = new Vue({
  el: '#root'
})

    .error {
  background: orange
}
.alright {
  background: mediumaquamarine
}
 section > div, pre {
  padding: 6px;
}
section {
  flex: 1;
}
#root {
  display: flex;
  flex-direction: column;
}

    <script src="https://unpkg.com/vue@2.1.6/dist/vue"></script>
<script src="https://unpkg.com/lodash"></script>

<template id="comp">
  <div :class="[model.validator(model) ? 'alright' : 'error']" style="display: flex; border-bottom: 2px solid rgba(0,0,0,0.4)">
    <section>
      <div v-for="(field, fieldName) in model">
        {{_.startCase(fieldName)}}:
        <input v-model="model[fieldName]">
        <br>
      </div>
      <error :condition="!model.validator(model)" :error-message="errorMessage"></error>
    </section>
    <section>
      <pre>props: {{$options.propsData}}</pre>
    </section>
  </div>

</template>

<template id="error">
  <div v-if="condition">
    {{ errorMessage || 'Oh no! An error!' }}
  </div>
</template>

<template id="app">
  <div :class="[models.validator(models) ? 'alright' : 'error']">
    <comp :model="model" error-message="Mistakes were made." v-for="model in models"></comp>
    <pre>data: {{$data}}</pre>
  </div>
</template>

<div id="root">
  <app></app>
</div>
    回复于
  • 0

    你绝对应该使用Vuex . 它不仅可以解决您的问题，还可以为您的项目提供巨大的可扩展性 .

    回复于

相关问题