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

  edit-field

},

data () {

...

您提到的道具用法看起来不错，假设field在父级中有数据。