Question

我正在尝试创建动态Vue组件，以跟踪自己的错误状态。我需要在父组件上进行验证，父验证方法应该更新子组件错误状态。在这个阶段，我无法猜测将生成多少子组件，因此很难跟踪通道道具。将通过API调用动态确定将呈现的子组件的数量。

到目前为止，我发现实现此目的的唯一方法是通过函数参数将组件实例传递给父级，并直接在父组件中更新数据属性。

我的问题是 - 除了将组件实例作为函数参数传递之外，还有更好的方法吗？

HTML

<div id="app">
  <number-only v-for="n in 8" 
               v-on:update="checkNumber"></number-only>
</div>

CSS

input {
  display: block;
  margin: 5px;
}
input.error {
  border: 1px solid #ff0000;
  background-color: 
}

的JavaScript

Vue.component('numberOnly', {
  template: `<input type="text"
              :class="{error: hasError}"
              @keyup="update($event.target.value)"
                />`
  , 
  data() {
    return {
      hasError: false
    }
  },
  methods: {
        update(val){
          this.$emit('update', {
            value: val,
            instance: this
          });
        }
      }
});

new Vue({
  el: '#app',
  components: ['numberOnly'],
  methods: {
    checkNumber(args){
      if(isNaN(args.value)){
        args.instance.hasError = true;
        return;
      }
      args.instance.hasError = false;
    }
  }
});

这是一个有效的Codepen示例： https://codepen.io/martiensk/pen/wroOLN

Answer 1

您可以将组件索引作为函数参数传递：

Vue.component('numberOnly', {
  props: {
    index: Number,
    error: {
      default: false
    }
  },
  template: `<input type="text"
              :class="{error: error}"
              @keyup="update($event.target.value)"
                />`
  ,
  methods: {
    update(val) {
      this.$emit('update', val, this.index);
    }
  }
});

并将索引和错误作为参数提供给组件：

<强> HTML

<number-only v-for="n in 8"
           :index="n"
           :error="hasError[n]"
           v-on:update="checkNumber">

<强>的JavaScript

new Vue({
  el: '#app',
  components: ['numberOnly'],
  data() {
    return {
      hasError: [],
    }
  },
  methods: {
    checkNumber(val, index){
      if(isNaN(val))
        this.$set(this.hasError, index, true);
      else
        this.$set(this.hasError, index, false);
    }
  }
});

Code example

或者你可以直接使用

<number-only v-for="n in 8"
           :index="n"
           :class="{'error': hasError[n]}"
           v-on:update="checkNumber">

从父级更新组件的数据属性 - Vue2 js

1 个答案: