Question

我有一个app.vue文件，其中有父代码。

<template>
  <div id="app" class="small-container">
    <h1>Employees</h1>
    <employee-form @add:employee="addNewEmployee" />
    <employee-table :employees="employees" />
  </div>
</template>

<script>
import EmployeeTable from '@/components/EmployeeTable.vue'
import EmployeeForm from '@/components/EmployeeForm.vue'

export default {
  name: 'app',
  components: {
    EmployeeTable,
    EmployeeForm,
  },
  data() {
    return {
      employees: [
        {
          id: 1,
          name: 'Richard Hendricks',
          email: 'richard@piedpiper.com',
        },
        {
          id: 2,
          name: 'Bertram Gilfoyle',
          email: 'gilfoyle@piedpiper.com',
        },
        {
          id: 3,
          name: 'Dinesh Chugtai',
          email: 'dinesh@piedpiper.com',
        },
      ],
      misc:'testbro',
    }
  },
  methods:{
    addNewEmployee: function( new_employee){
        var length = Object.keys(this.employees).length;
        length = length+1;
        this.employees.push({id:length,name:new_employee.name,email:new_employee.email});
    }
  }
}
</script>

我正在将data()方法中的两个参数传递给子EmployeeTable。

<template>
  <div id="employee-table">
    <table>
      <thead>
        <tr>
          <th>Employee name</th>
          <th>Employee email</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="employee in employees" :key="employee.id">
          <td>{{ employee.name }}</td>
          <td>{{ employee.email }}</td>
        </tr>
      </tbody>
      <tfoot>
          <tr>
              <td>Misc Label</td>
              <td>{{misc}}</td>
          </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
    export default {
    name: 'employee-table',
    inheritAttrs: false,
        props: {
            employees: Array,
            misc: String,
        },
    }
</script>

显示员工姓名和电子邮件，但不显示其他{{misc}}。我访问道具不正确吗？

Answer 1

您没有将misc传递给子组件，您有：

<employee-table :employees="employees" />

但是您需要：

<employee-table :employees="employees" :misc="misc" />

Answer 2

这并不是您在错误地访问prop，实际上您根本没有将misc传递给子组件。如果仔细阅读，您只会通过employees作为道具：

<employee-table :employees="employees" />

正确的代码如下（在父级中）：

<employee-table :employees="employees" :misc="misc" />

从父级传递到子级的Vue数据无法访问

2 个答案: