Question

我正在使用Vue.js。在我的模板中，我包括子组件（componentB），该子组件包含多个输入元素。我想从父模板初始化那些输入元素。我找到了一种方法（请参见下面的代码）。但是，我想知道这是否是正确的方法，因为到目前为止，我已阅读的文章使用了不同的方法（例如，使用$ emit）：

您可以确认我下面的代码与Vue.js设计概念匹配吗，还是存在缺陷？

<template>
  <div>
    <div class="md-layout">
      <div class="md-layout-item md-size-100">
        <ComponentB ref="componentB" v-model="componentB"></ComponentB>
      </div>
    </div>
  </div>
</template>
<script>
import { ComponentB } from "@/components";
export default {
  components: {
    ComponentB
  },
  data() {
    return {
      componentB: {
        textInputField: "my-initial-value"
      }
    };
  },
  methods: {
    validate() {
      return this.$refs.componentB.validate().then(res => {
        this.$emit("on-validated", res);
        return res;
      });
    }
  }
};
</script>
<style></style>

表单componentB

<template>
<div>
    <md-field
            :class="[
            { 'md-valid': !errors.has('textInputField') && touched.textInputField },
            { 'md-form-group': true },
            { 'md-error': errors.has('textInputField') }
          ]"
    >
        <md-icon>label_important</md-icon>
        <label>My text input</label>
            <md-input
                    v-model="textInputField"
                    data-vv-name="textInputField"
                    type="text"
                    name="textInputField"
                    required
                    v-validate="modelValidations.textInputField"
            >
            </md-input>
        <slide-y-down-transition>
            <md-icon class="error" v-show="errors.has('textInputField')"
            >close</md-icon
            >
        </slide-y-down-transition>
        <slide-y-down-transition>
            <md-icon
                    class="success"
                    v-show="!errors.has('textInputField') && touched.textInputField"
            >done</md-icon
            >
        </slide-y-down-transition>
    </md-field>
</div>
</template>
<script>
import { SlideYDownTransition } from "vue2-transitions";
export default {
  name: "componentB",
  props: ['value'],
  components: {
    SlideYDownTransition
  },
  computed: {
    textInputField: {
      get() {return this.value.textInputField},
      set(textInputField) { this.$emit('input', { ...this.value, ['textInputField']: textInputField })}
    }
  },
  data() {
    return {
      touched: {
        textInputField: false
      },
      modelValidations: {
        textInputField: {
          required: true,
          min: 5
        }
      }
    };
  },
  methods: {
    getError(fieldName) {
      return this.errors.first(fieldName);
    },
    validate() {
      return this.$validator.validateAll().then(res => {
        return res;
      });
    }
  },
  watch: {
    textInputField() {
      this.touched.runnerName = true;
    }
  }
};
</script>
<style></style>

Answer 1

将数据传递给子组件的最简单方法是使用prop，然后在子组件中可用这些道具，并将其传递回父项。

https://vuejs.org/v2/guide/components-props.html

// PARENT COMPONENT

<ComponentB :textInputField="textInputField" ...></ComponentB>

// CHILD COMPONENT
// TEMPLATE SECTION
<md-input
    v-model="textInputField"
    value="textInputField"
    ...
    >
// SCRIPT SECTION
export default {
    props: {
        textInputField: String
    }
}

如何将初始表单值传递给Vue.js中的子组件？

1 个答案: