передача данных между компонентами не работает

Question

Я боролся с этим часами, я новичок в vuejs, в основном у меня есть модал, основанный на вкладках, и я хочу показать некоторые данные в модальном контенте моего модала, месте, где происходит событие нажатия openмодальное происходит в другом файле vue, а место, где я хочу заполнить модальное содержимое, находится в другом vue, вот мой код

файл основного блейда

@section('main-content')
<div class="full-page-taps">
    <div class="page-head p-4 mb-lg-4">
        <h3>Directory</h3>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <employee-search :inplaceholder="'Search Techs'"></employee-search>
            </div>
        </div>
        <employee-card-section :indata="{{ $employees }}"></employee-card-section>
    </div>
    <modal name="employee-modal"
        :width="'94%'"
        :height="'94%'"
    >
    <employee-modal-content v-on:custom="customHandler"></employee-modal-content>
    </modal>
</div>
@endsection

employeecard.vue

  methods: {
                openEmployee() {

                // if(this.viewEmployees) {

                    this.$modal.show('employee-modal');

// this.$emit("passdata",this.employee.id);
                             this.$emit('chalja');
                            //   this.$emit('custom', 'somedata');
                            //    this.$eventHub.$emit("passdata");
                        // })

                // }

            }
            },

employee-modal-content.vue

<template>
<div>
<div class="secondary-header no-margin">
    <h2>UNEEB</h2>
</div>
<div class="customer-panel">
    <input type="hidden" id="eid" value="" />
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#profile" role="tab">Profile</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#bio" role="tab">Bio</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#audit" role="tab">Audit</a>
        </li>
    </ul>
        <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane active" id="profile" role="tabpanel">

        </div>
        <div class="tab-pane" id="bio" role="tabpanel">

        </div>
        <div class="tab-pane" id="audit" role="tabpanel">

        </div>
    </div>
</div>
</div>
</template>

<script>

export default {
        methods:{
             customHandler : function(e){
      console.log(e);
      console.log("works");
    }
        },
        mounted(){
         this.$eventHub.$on('chalja', ()=> {
      alert("agya");
      });
        }
    }

</script>

Я в основном хочу передать в Идентификатор от employeecard.vue до directory-modal-content.vue .Я пробовал много решений, но ни одно не помогло мне, любая помощь?

Answer 1

Должно быть так:

1.Передайте свой идентификатор как динамическую опору компонента

<employee-modal-content :id="employee.id"></employee-modal-content>

2.В вашем дочернем компоненте вы должны использовать реквизиты, чтобы получить переменную id

<template>
  <div>
    {{ id }}
  </div>
</template>

<script>
export default {
  props: ['id'],
  methods:{
      //...
  }
}
</script>