在组件之间传递数据不起作用答案

【问题标题】：passing data between components not working在组件之间传递数据不起作用
【发布时间】：2019-11-14 09:01:23
【问题描述】：

我已经为此苦苦挣扎了几个小时，我是 vuejs 的新手，基本上我有一个基于选项卡的模态，我想在我的模态的模态内容中显示一些数据，即单击事件打开的地方模态发生在另一个 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 中的 ID 传递给 directory-modal-content.vue。我尝试了很多解决方案，但没有一个对我有用，有什么帮助吗？

【问题讨论】：

你应该在组件之间传递变量作为道具
问题在于它不是来自刀片文件，而是来自一个独立组件

标签： vue.js vuejs2

【解决方案1】：

应该是这样的：

1.将您的 id 作为组件的动态属性传递

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

2.在您的子组件中，您必须使用道具来接收 id 变量

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

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

【讨论】：