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>

当我点击按钮时，对话框为真，所以我调用了订单表单组件我想将数据传递给它。组件正常打开，但错误提示找不到 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>

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

Answer 1

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

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
}

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

how to send object to child component in Vue elementui

javascript

vue.js

element-ui