为什么 Quasar、Vue 3 应用中 Child 组件中的 props 是空的？-解网

问：

我正在将 props 作为表中的一行传递给 Quasar vue3 应用程序中的 Child 组件表，但内容没有呈现，我想知道为什么？控制台很清楚。在父组件中，我定义了一个带有键和值的对象，并尝试将其作为道具传递给子组件，然后渲染它。我正在用按钮切换父组件中的模态窗口。

    // Child component

    const props = defineProps({
        airCraft: {
          required: true
        }
      })
      const rows = [props.airCraft]
      
      <template>
      <q-dialog >
          <q-card>
            <q-card-section>
              <q-table
                title="name"
                :rows="rows"
                :columns="columns"
                row-key="name"
                :hide-bottom="rows.length > 0"
                flat bordered
                >
                <template v-slot:body="props">
                  <q-tr :props="props">
                    <q-td key="id" :props="props">
                      {{ props.row.id }}
                    </q-td>
                <template>
              <q-table>
          <q-card-section>
        <q-card>
      <q-dialog >        
      <template>
      
      // Parent component
     <script>
     let airCraft = {
      id: '1',
      name: 'name'
     }
     <script setup>
import {ref} from 'vue' 
let fixed = ref(true)
     <template>
        <ModalAircraft v-model="fixed" :airCraft="airCraft" @click='fixed = true'/>
      <template>

javascript vue.js vuejs3 类星体 vue-props

<template>
  <div>
    <q-btn label="Click" @click="modal = true" />
    <q-dialog v-model="modal">
      <q-card>
        <q-card-section>
          <q-table
            title="name"
            :rows="rows"
            :columns="columns"
            row-key="name"
            :hide-bottom="rows.length > 0"
            flat
            bordered
          >
            <template v-slot:body="props">
              <q-tr :props="props">
                <q-td key="id" :props="props">
                  {{ props.row.id }}
                </q-td>
              </q-tr>
            </template>
          </q-table>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  airCraft: {
    required: true,
  },
});

const rows = [props.airCraft];

const modal = ref(false);
</script>

我添加了一个在单击时切换到 true。然后，绑定到 .在组件渲染后，您会看到一个按钮。单击该按钮后，会弹出一个对话框，您将找到您的表格q-btnmodalmodalq-dialog

代码在这里：https://stackblitz.com/edit/stackblitz-starters-icrnbz

我可以看到你添加了一些东西。这里有 2 个问题。首先，整个是一个对话框，所以向它添加一个点击事件对你没有帮助，因为你无法点击它，因为它不在屏幕上。其次，您没有为声明任何 v-model 处理程序，因此 on 毫无意义。尝试在里面添加一个按钮，然后戴上它。移动你的内部.在那之后，一切都会好起来的fixedModalAircraftModalAircraftv-modelModalAircraftModalAircraft@clickfixedModalAircraft

上一个：如何在 Vue 3 Quasar 中通过路由器链接传递道具？

下一个：Postgres的 |将数组行转换为整数行

为什么 Quasar、Vue 3 应用中 Child 组件中的 props 是空的？

Why the props in a Child component are empty in Quasar, Vue 3 app?

评论

评论