将数据传递给组件 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

  }

}

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

Answer 1

首先，父模板的 HTML 无效： q-list并且div之前没有正确关闭。这可能是问题的一部分。您需要先edit-field在父组件中导入并注册组件，然后才能使用它。在import现有的export. 根据文件名和路径，类似import edit-field from '@/components/edit-field.vue';然后，同样在父组件中，更改选项以包含components用于注册子组件的属性，并在其中列出导入的组件，如下所示：name: 'Registration',components: {&nbsp; edit-field},data () {...您提到的道具用法看起来不错，假设field在父级中有数据。