如何将对象发送到 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'

@Component

export default class App extends Vue {

  // Makes a "exampleProperty" a component prop with the default value of 'Example'

  @Prop({default: 'Example'})

  exampleProperty: string

}