Vue данные передаются от родителя к ребенку, который не имеет доступа

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>

Имя сотрудника и адрес электронной почты отображаются, но не отображается c {{misc}}. Я неправильно обращаюсь к опоре?

Answer 1

Вы не передаете misc дочернему компоненту, у вас есть:

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

Но вам нужно:

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

Answer 2

Дело не в том, что вы неправильно обращаетесь к реквизиту, вы на самом деле вообще не передаете misc дочернему компоненту. Вы пропускаете employees в качестве реквизита, если внимательно читаете:

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

Правильный код будет выглядеть так (в родительском):

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