Question

我已经为此奋斗了几个小时，我是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>

我基本上想将 ID 从 employeecard.vue 传递到 directory-modal-content.vue 。我尝试了许多解决方案，但没有一个对我有用，有帮助吗？

Answer 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>

在组件之间无法传递数据

1 个答案: