Vue中如何正确向Modal组件传递Props？

核心问题1：Modal组件未响应Props更新 #

你的Modal组件在setup中仅将props.pizza赋值给内部pizza ref一次，当主组件的selected_pizza更新时，Modal的props.pizza会同步变化，但内部的pizza ref不会自动更新——因为没有监听props的变化。

修复方案：
如果不需要在Modal内部修改pizza数据，直接使用props.pizza即可，无需额外声明内部ref：

// PizzaModal.vue
import { defineComponent, ref, PropType} from 'vue'
import {PizzaInterface} from '@/interfaces/pizza'

export default defineComponent({
    props:{
      pizza: {
        type: Object as PropType<PizzaInterface>,
        required: true
      }
    },
    setup(props){
        const amount = ref(1)
        // 直接返回props中的pizza
        return{
          ...props, amount
        }
    }
})

如果必须使用内部ref，添加监听同步props变化：

setup(props){
    const amount = ref(1)
    const pizza = ref<PizzaInterface>({})
    // 监听props变化并更新内部ref
    watch(() => props.pizza, (newPizza) => {
      pizza.value = newPizza
    }, { immediate: true })

    return{
      pizza, amount
    }
}

核心问题2：Bootstrap模态框触发时机与Vue响应式冲突 #

你使用原生Bootstrap的data-bs-toggle和data-bs-target触发模态框，这个操作是同步的，可能在Vue完成selected_pizza的响应式更新之前就渲染了Modal，导致Modal拿到的还是初始空对象。

修复方案：
改用Vue变量控制模态框显示，替代原生属性：

1. 主组件添加控制变量与打开逻辑：

// 主组件setup内
import { nextTick } from 'vue'
const showModal = ref(false)
const openModal = (pizzaItem) => {
  selected_pizza.value = pizzaItem
  // 等待Vue完成响应式更新后再打开模态框
  nextTick(() => {
    showModal.value = true
  })
}

2. 修改主组件模板：

<!-- 按钮移除原生属性，绑定自定义点击事件 -->
<button type="button" class="btn btn-primary btn-sm" @click='openModal(pizza)'>Add</button>

<!-- 给Modal组件传递显示状态与关闭事件 -->
<PizzaModal :pizza='selected_pizza' :show='showModal' @close='showModal = false'/>

3. Modal组件处理显示逻辑：

<!-- PizzaModal.vue模板 -->
<div class="modal fade" :class="{ show: show, 'd-block': show }" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{ pizza.name }}</h5>
        <button type="button" class="btn-close" @click="$emit('close')"></button>
      </div>
      <!-- 其他模态框内容，直接使用props.pizza -->
      <div class="modal-body">
        <p>配料：{{ pizza.ingredients.join(', ') }}</p>
        <p>价格：${{ pizza.price }}</p>
      </div>
    </div>
  </div>
</div>
<!-- 模态框遮罩层 -->
<div v-if="show" class="modal-backdrop fade show"></div>

// PizzaModal.vue的props与事件声明
props:{
  pizza: {
    type: Object as PropType<PizzaInterface>,
    required: true
  },
  show: {
    type: Boolean,
    default: false
  }
},
emits: ['close']

其他潜在问题修复 #

1. pizzas初始类型错误：API返回的是数组，初始化应使用数组类型：

const pizzas = ref<PizzaInterface[]>([])

2. v-for的key值错误：不能用对象作为key，改用披萨的唯一标识（如id）：

<div class="row mb-2 border-top border-bottom" v-for="pizza in pizzas" :key="pizza.id">

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