问如何在Vue.js中将初始值传递给子组件？

EN

<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>

<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>