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

Posted 2023-02-22

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

【英文标题】：How to pass initial form values to child component in Vue.js?

【发布时间】：2019-12-23 09:19:40

【问题描述】：

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

https://simonkollross.de/posts/vuejs-using-v-model-with-objects-for-custom-components https://zaengle.com/blog/using-v-model-on-nested-vue-components https://alligator.io/vuejs/add-v-model-support/

您能否确认我的以下代码符合 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>

表单组件B

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

【问题讨论】：

数据/属性传输（在您的情况下是初始化）理想情况下应该通过props 进行。 $emit 是其他方式 OR pubsub 的一般用例。

明白了。另外，你能看到当前代码有什么问题吗？

【参考方案1】：

将数据传递给子组件的最简单方法是使用道具，然后它们在子组件中可用，并且可以将值传递回父组件。

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