how to send object to child component in Vue elementui

问题

I am new to vue. so here is my vue template

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

when i click the button the dialog is true so i call the order-form component and i want to pass data to it. component is opening normally but error said that oneorderview is not found although i am showing it in console normally in senddata method.

i tried

v-bind:oneorder="oneorderview"

but it didn't work , it it shows no error.

thanks in advance.

this is my script

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

and how to handle data in child component.

回答1:

You're using class components in Vue typescript. To pass props you need to either use the classic Vue properties or by annotating your class members:

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
}

来源：https://stackoverflow.com/questions/61820344/how-to-send-object-to-child-component-in-vue-elementui