Vue模态框无法展示信息：无报错但组件控制台运行正常

我来帮你一步步排查这个问题，结合你给出的代码片段，大概率是数据传递未配置或者组件内部未正确绑定数据导致的，咱们逐个解决：

1. 给Modal组件添加Props接收父组件数据 #

你在app.js里定义了id、booking_start等数据，但Modal作为子组件，并没有声明接收这些数据的入口。首先要在Modal.vue里配置props：

<script>
export default {
  // 声明需要从父组件接收的属性，注意Vue推荐用小驼峰命名
  props: ['id', 'bookingStart', 'bookingEnd', 'car', 'user']
}
</script>

然后在父组件使用Modal时，把对应数据传递进去：

<!-- 在#vue容器内使用Modal组件 -->
<modal 
  :id="id" 
  :booking-start="booking_start" 
  :booking-end="booking_end" 
  :car="car" 
  :user="user"
></modal>

这里注意：父组件里的蛇形命名booking_start，在模板传参时要转成短横线分隔的booking-start，Vue会自动映射到子组件的小驼峰bookingStart。

2. 在Modal模板内绑定数据展示 #

你的Modal模板只写了header的slot部分，需要在modal-body里添加数据绑定代码，才能把传递过来的props渲染出来：

<template>
  <div id="modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <slot name="header">默认标题</slot>
        </div>
        <!-- 新增模态框内容区域，绑定props数据 -->
        <div class="modal-body">
          <p>预约ID：{{ id }}</p>
          <p>开始时间：{{ bookingStart }}</p>
          <p>结束时间：{{ bookingEnd }}</p>
          
          <!-- 车辆信息展示（判断数组/对象是否有内容） -->
          <div v-if="car.length > 0">
            <h5>车辆详情</h5>
            <p>品牌：{{ car.brand }}</p>
            <p>型号：{{ car.model }}</p>
          </div>

          <!-- 用户信息展示 -->
          <div v-if="user.length > 0">
            <h5>用户信息</h5>
            <p>姓名：{{ user.name }}</p>
            <p>电话：{{ user.phone }}</p>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>

3. 确保模态框被正确触发显示 #

如果数据传递和绑定都没问题，但模态框还是不显示，可能是缺少显示状态的控制。可以在父组件里加一个响应式变量控制模态框的显示：

// app.js的data部分补充
data() {
  return {
    id: '',
    booking_start: '',
    booking_end: '',
    car: [],
    user: [],
    showModal: false // 控制模态框显示的变量
  };
},
methods: {
  openModal() {
    // 先给数据赋值（比如从接口/表格行获取数据）
    // this.id = '123';
    // this.car = { brand: '特斯拉', model: 'Model 3' };
    this.showModal = true;
    // 如果用Bootstrap原生模态框，也可以手动触发：$('#modal').modal('show');
  }
}

然后在模板里用v-if或者绑定Bootstrap的show类来控制显示：

<modal 
  :id="id" 
  :booking-start="booking_start" 
  :booking-end="booking_end" 
  :car="car" 
  :user="user"
  v-if="showModal"
></modal>

4. 验证数据是否正确传递 #

可以在Modal组件里加个调试代码，确认props是否接收到数据：

<script>
export default {
  props: ['id', 'bookingStart', 'bookingEnd', 'car', 'user'],
  mounted() {
    console.log('Modal接收到的props：', this.id, this.car);
  }
}
</script>

如果控制台能打印出正确的数据，说明传递没问题，只需要检查模板绑定是否正确；如果打印为空，就回到父组件检查数据赋值和props传递的步骤。

内容的提问来源于stack exchange，提问作者kerrin