如何从子组件调用SvelteKit的Form Actions？现有表单方式无效

你的路由结构和代码逻辑框架没问题，但子组件表单无法触发+page.server.js里的create_content动作，核心是表单action的路径解析问题。以下是几种无需使用store的解决方式：

方法1：指定完整路由路径作为action值 #

直接把表单的action设置为当前路由的完整路径加上动作标识，精准指向目标路由的action：

<!-- child_component.svelte -->
<form method="POST" action="/foobar_route?/create_content">
   <input/>
   <button type="submit">Post</button>
</form>

方法2：父组件传递action路径给子组件 #

通过props把当前页面的路由路径（借助$page.url.pathname获取）传给子组件，子组件复用该路径拼接动作标识：

<!-- +page.svelte -->
<script>
import Child_component from './child_component.svelte';
import { page } from '$app/stores';
</script>

<Child_component actionPath={`${$page.url.pathname}?/create_content`}/>

<!-- child_component.svelte -->
<script>
export let actionPath;
</script>

<form method="POST" action={actionPath}>
   <input/>
   <button type="submit">Post</button>
</form>

方法3：事件委托，父组件处理提交逻辑 #

子组件不直接定义表单action，而是通过事件触发父组件的提交逻辑，父组件用fetch手动调用路由action：

<!-- child_component.svelte -->
<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();

function handleSubmit(e) {
    e.preventDefault();
    const formData = new FormData(e.target);
    dispatch('submit', { formData });
}
</script>

<form on:submit={handleSubmit}>
   <input/>
   <button type="submit">Post</button>
</form>

<!-- +page.svelte -->
<script>
import Child_component from './child_component.svelte';
import { page } from '$app/stores';

async function handleSubmit(event) {
    const { formData } = event.detail;
    await fetch($page.url.pathname, {
        method: 'POST',
        body: formData
    });
    // 提交后可在此处理刷新数据、提示等逻辑
}
</script>

<Child_component on:submit={handleSubmit}/>

方法4：使用SvelteKit的use:enhance（推荐） #

借助SvelteKit的表单增强指令，自动处理表单提交的路径解析和后续逻辑，确保action正确触发：

<!-- child_component.svelte -->
<script>
import { enhance } from '$app/forms';
</script>

<form method="POST" action="?/create_content" use:enhance>
   <input/>
   <button type="submit">Post</button>
</form>

该方式会自动将?/create_content解析为当前路由的server action，同时支持提交后的页面状态更新、错误处理等场景。

内容的提问来源于stack exchange，提问作者Châu Ngô