如何将对象发送到 Vue elementui 中的子组件

Question

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

当我点击按钮时，对话框是真的，所以我调用订单组件，我想向它传递数据。组件正常打开，但错误说找不到一个orderview，尽管我在发送数据方法中正常在控制台中显示它。

我试过了

v-bind:oneorder="oneorderview"

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

提前致谢。

这是我的脚本

<script>

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

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

Answer 1

你在 Vue typescript 中使用了类组件。要传递 props，你需要使用经典的 Vue 属性，或者通过注释你的类成员：import { Component, Prop } from 'vue-property-decorator'@Componentexport default class App extends Vue {&nbsp; // Makes a "exampleProperty" a component prop with the default value of 'Example'&nbsp; @Prop({default: 'Example'})&nbsp; exampleProperty: string}