将数据传递给组件 Vue.js

Question

我正在尝试将数据从一个组件传递到另一个组件，但出现了一些问题。 有人可以帮忙吗？这是我的代码：

<template>
   <div class="q-pa-md" style="max-width: 900px">
   <div v-if="fields.length">
      <q-item-label header>User settings</q-item-label>
      <q-list v-for="field in fields" :key="field.id">
      <div v-if="field.type == 'singleLine'">
         <q-item>
            <q-item-section>
               <s-input
                  :label="field.name"
                  :rule="field.rule"
                  :required="field.required"
                  :type="field.fieldType" />
            </q-item-section>
            <q-item-section side top>
               <div style="display: inline-flex;">
                  <div>
                     <q-icon name="edit" color="blue" size="md" @click="editField = true"/>
                     <q-tooltip>
                        Edit {{ field.name }} field
                     </q-tooltip>
                  </div>
               </div>
            </q-item-section>
         </q-item>
      </div>
      <q-dialog v-model="editField">
         <edit-field
            :field="field"
            >
         </edit-field>
      </q-dialog>
   </div>
</template>

export default {
  name: 'Registration',
  data() {
    return {
      newItem: true,
      titleAction: null,
      title: null,
      titleHideEvent: false,
      editField: false,
      fields: {},
      field: {},
      loading: false
    }
  },
  methods: {},
  mounted() {
    this.titleAction = 'Registration'
    this.titleHideEvent = true
  }
}

编辑字段组件：

<template>
  <q-card>
    <q-card-section>
      <div class="text-h6">Edit Field</div>
    </q-card-section>

    <q-separator />

    <q-card-section style="max-height: 60vh; min-width: 560px;" class="scroll">
      <q-form @submit.prevent="onSubmit">
        <s-select
          autocomplete
          sorted
          v-model="fieldToSubmit.type"
          :options="$store.getters['options/list']('fieldTypes')"
          option-value="value"
          option-label="label"
          label="Field Type"
          required
        />
        <s-input v-model="fieldToSubmit.name" label="Name" required />
        <s-select
          autocomplete
          sorted
          v-model="fieldToSubmit.subType"
          :options="$store.getters['options/list']('registrationFieldTextSubTypes')"
          option-value="value"
          option-label="label"
          label="Subtype"
          required
        />
        <s-checkbox v-model="fieldToSubmit.required" label="Required" />
        <s-checkbox v-model="fieldToSubmit.active" label="Active" />

        <q-separator />

        <q-card-actions align="right">
          <q-btn flat label="Cancel" color="primary" v-close-popup />
          <q-btn label="Add" color="primary" type="submit" v-close-popup />
        </q-card-actions>
      </q-form>
    </q-card-section>
  </q-card>
</template>

<script>
export default {
  props: ['field'],
  data () {
    return {
      fieldToSubmit: {
      }
    }
  },
  methods: {
    onSubmit () {
      console.log(this.fieldToSubmit)
      this.$q.notify({
        color: 'green-4',
        textColor: 'white',
        icon: 'cloud_done',
        message: 'Submitted'
      })
    }
  },
  mounted () {
    this.fieldToSubmit = Object.assign({}, this.field)
  }
}
</script>

当我单击编辑按钮时，它会打开模式，但不会用现有值填充字段。 有谁知道可能是什么问题？我尝试使用道具传递字段值，但我不知道这是正确的方法

Answer 1

首先，父模板的 HTML 无效：q-list 和之前的div 没有正确关闭。这可能是问题的一部分。

您需要在父组件中导入并注册edit-field 组件，然后才能使用它。在现有的export 之前执行import。根据文件名和路径，类似

import edit-field from '@/components/edit-field.vue';

然后，同样在父级中，更改选项以包含用于注册子组件的components 属性，并在其中列出导入的组件，如下所示：

name: 'Registration',
components: {
  edit-field
},
data () {
...

假设 field 在父节点中有数据，您提到的 props 用法看起来没问题。