Vue & Laravel：如何将Prop传递给常量并完成赋值？

云上老周

2026-8-15

问题解决：Laravel Inertia传递Post到Vue组件的赋值问题

错误原因

你当前的代码混用了Vue的选项式API和组合式API语法，const article = ref(post)写在了组件选项的外部，不在组件作用域内，因此无法访问到post这个prop。

解决方案

根据Vue的两种API风格，提供两种可行写法：

1. 选项式API写法（适合Vue新手）

保持你原本的选项式API结构，通过组件实例的this访问props，并在data中定义本地响应式变量：

<script>
export default {
  props: {
    post: {
      type: Object,
      required: true // 建议添加必填校验，避免未传值的异常
    }
  },
  data() {
    return {
      // 将props中的post赋值给本地响应式变量article
      article: this.post
    }
  }
}
</script>