Laravel+Inertia+Vue使用<script setup>时组件导入及Props接收问题

使用<script setup>时遇到组件导入与Props接收的冲突问题：
页面中的表格需要作为AppLayout（含导航栏）的一部分，因此需要导入AppLayout.vue和按钮组件；同时要将Laravel控制器传递的数据库数据映射到表格中，已配置路由和控制器：

路由代码：

Route::get('/articles', [\App\Http\Controllers\ArticleController::class, 'index']);

控制器代码：

class ArticleController extends Controller
{
    public function index()
    {
        $articles = Article::all();
        return inertia('Articles/Index', compact('articles'));
    }
}

尝试用以下代码接收Props并导入组件：

<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';    
import JetButton from '@/Jetstream/Button.vue';

export default {
props: {
    articles: Object
    }
}

但出现以下问题：

• 使用<script setup>时，代码无法正常工作，报错：

<script setup> cannot contain ES module exports.

• 移除setup后能实现数据交互，但无法使用import导入组件，PHPStorm会自动移除导入语句

疑问：

1. 是否必须使用require？
2. 如何不通过export default获取Props（比如defineProps？）？
3. 如何在<script setup>中传递Props？

1. 不需要使用require #

<script setup>完全支持ES模块的import语法，之前的问题不是import本身导致的，而是你在<script setup>里混用了传统的export default写法，这才触发了报错。只要按照<script setup>的规范编写，import可以正常使用。

2. 用defineProps替代export default声明Props #

在<script setup>语法中，不能用export default来声明Props，必须使用Vue提供的defineProps宏来定义组件的Props，它是<script setup>特有的语法，不需要额外导入。

示例代码：

<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';    
import JetButton from '@/Jetstream/Button.vue';

// 用defineProps声明Props
const props = defineProps({
    articles: Object
})
</script>

之后就可以通过props.articles来访问传递过来的数据。

3. 在<script setup>中传递Props的方式 #

在父组件中传递Props的方式和传统写法完全一致，比如在AppLayout中使用你的表格组件时：

<template>
  <AppLayout>
    <YourTableComponent :articles="articlesData" />
  </AppLayout>
</template>

子组件（表格组件）通过defineProps接收后，直接使用props.articles即可获取数据。

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