vue js将数据传递给组件

Posted 2023-02-22

【中文标题】vue js将数据传递给组件

【英文标题】：vue js passing data to a component

【发布时间】：2016-09-24 22:04:10

【问题描述】：

您好，我在将数据传递给“模态”组件时遇到问题，我使用带有 bootstrap-vue 组件的模态，我需要传递索引，这就是我尝试做的事情

<table class="table table-striped" v-show="Questions.length!=0">
<tr v-for="Question in Questions">
  <td>$index + 1</td>
  <td> Question.text </td>
  <td>
  <button v-on:click="showmodal = true"  class="btn btn-default" >Manage</button>
  <modal :show.sync="showmodal"  >
    <div slot="modal-header" class="modal-header">
      <h4 class="modal-title">Manage Question</h4>
    </div>
    <div slot="modal-body" class="modal-body">
    <div class="input-group col-lg-6">
      <input type="text" class="form-control"  value=" Questions[$index].text "></input>
      <span class="input-group-btn"><button v-on:click="AddQuestion"  class="btn btn-default">Save Question</button></span>
    </div>
    </div>
    <div slot="modal-footer" class="modal-footer">
    <button type="button" class="btn btn-default" v-on:click='showmodal = false'>Exit</button>
    <button type="button" class="btn btn-success" v-on:click='showmodal = false'>Custom Save</button>
    </div>
  </modal>
  <button class="btn btn-danger" v-on:click="DeleteQuestion($index)">Delete</button>
  </td>
</tr>

提示：在 index 中传递给模态的数据是最后一个索引，即使模态它在循环内

【参考方案1】：

使用 Vue 道具：http://vuejs.org/guide/components.html#Props

在你的例子中：

<modal :show.sync="showmodal" :index="$index" >
    ...
</modal>

然后在你的 Vue 模态组件中：

props: ['index']

然后您将能够访问组件内的index，就像任何其他属性一样：this.index