如何在Vue elementui中将对象发送到子组件答案

【问题标题】：how to send object to child component in Vue elementui如何在Vue elementui中将对象发送到子组件
【发布时间】：2020-09-01 08:16:02
【问题描述】：

我是 vue 新手。这是我的 vue 模板

<template>
<div class="app-container">
  <el-dialog :visible="dialogVisible"
             title="View order"
             :before-close="() => dialogVisible = false">
    <order-form :oneorder="oneorderdata" @success="handleAdd" @cancel="dialogVisible = false" />
  </el-dialog>
  <el-table v-loading="loading" :data="orders" border>
    <el-table-column prop="order.id" label="Id" />
    <el-table-column prop="order.fullName" label="Full Name" />
    <el-table-column prop="order.address.name" label="Address" />
    <el-table-column prop="order.status" label="Status" />
    <el-table-column label="View" prop="order.id" min-width="150">
      <template slot-scope="{row}">
      <el-col style="flex: 0">
        <el-button icon="el-icon-plus" type="primary" @click="senddata(row.order)">
          View Order
        </el-button>
      </el-col>
    </template>
    </el-table-column>

  </el-table>
</div>
</template>

当我单击按钮时，对话框为真，因此我调用了订单表单组件我想将数据传递给它。组件正常打开，但错误提示未找到 oneorderview，尽管我在 senddata 方法中正常在控制台中显示它。

我试过了

v-bind:oneorder="oneorderview"

但它不起作用，它没有显示错误。

提前致谢。

这是我的脚本

<script lang="ts">
  import Vue from "vue";
  import Component from "vue-class-component";
  import { getOrders } from "@/api/store";
  import dataStore from "@/store/modules/data";
  import { OrderView } from "../../../models";
  import { OrderInput } from "@/models";
  import DataModule from "@/store/modules/data";
  import OrderForm from "./form.vue";

  type _OrderInput = OrderInput;

  interface TableRowData {
    editMode: boolean;
    order: OrderView;
    editedOrder: _OrderInput;
  }

  @Component({
    components: {
      OrderForm,
    },
  })
  export default class Orders extends Vue {
    orders: TableRowData[] = [];
    oneorderview: any;
    loading = false;
    dialogVisible = false;
    searchKey = "";

    async created() {
      await DataModule.ensureLoaded();
      this.fetchData();
    }

    async fetchData() {
      this.loading = true;
      await dataStore.loadorders();
      if (dataStore.orders.hasLoaded) {
        this.orders = dataStore.orders.data.map(order => ({
          editMode: false,
          order,
          editedOrder: { ...order }
        }));
      }
      this.loading = false;
    }
    handleAdd() {
      this.dialogVisible = false;
    }
    senddata(selectedorder: any) {
      this.oneorderview = selectedorder;
      this.dialogVisible = true;
      console.log('hahahaha', this.oneorderview);
    }
  }
</script>

以及如何处理子组件中的数据。

【问题讨论】：

我认为，如果您发布了 minimal reproducible example 来表示您的尝试，您会得到更多回复。现在代码太多，无法查看并提供任何帮助。
@palash 你说得有道理，但我是 vue 新手，我不知道我的问题出在哪里。所以我把我所有的代码

标签： javascript vue.js element-ui

【解决方案1】：

您在 Vue 打字稿中使用类组件。要传递道具，您需要使用经典的 Vue 属性或通过注释您的类成员：

import { Component, Prop } from 'vue-property-decorator'

@Component
export default class App extends Vue {
  // Makes a "exampleProperty" a component prop with the default value of 'Example'
  @Prop({default: 'Example'})
  exampleProperty: string
}

【讨论】：