将数据传递给组件 Vue.js

Posted 2023-02-23

【中文标题】将数据传递给组件 Vue.js

【英文标题】：Pass data to component Vue.js

【发布时间】：2020-06-21 10:19:06

【问题描述】：

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

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

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

【问题讨论】：

请始终尝试提供简化的代码。您传递 prop-data 的方式看起来不错，尽管您不需要 Object.assign （已经传递了一个对象）。通过在父项的某处显示 field 检查字段对象中的实际内容。

【参考方案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 用法看起来没问题。

【讨论】：

我有另一个用于导入组件的 js 文件，它显示来自编辑字段组件的表单，但它只是不检索字段数据

当您在孩子的mounted 中console.log(this.field) 时会发生什么？

表示field在父节点中为空。 q-list 标签也未关闭，因此您的 HTML 无效。而它之外的另一个div 也没有关闭。可能是相关的。

另外，从父数据属性中删除field，因为您在v-for中定义它

从数据属性中删除字段后，一切都解决了