元素
元素
工具
博客
问答

Solid Start 中如何正确使用 Vue 风格的模板写法？

a'ゞ洋毅 阅读 14
框架

我之前用 Vue 写习惯了，现在转 Solid Start 总是下意识写 Vue 的模板语法，结果页面直接报错。比如下面这段代码，在 Vue 里完全没问题，但在 Solid Start 里就不行：

<template>
  <div>{{ message }}</div>
</template>

<script setup>
const message = 'Hello from Vue-style!'
</script>

我知道 Solid 不是 Vue，但有没有办法在 Solid Start 里兼容这种写法？还是说必须彻底改成 JSX 或者 Solid 的响应式语法？

我来解答 赞 2 收藏
二维码
手机扫码查看
反馈
1 条解答
码农鑫丹
码农鑫丹 Lv1
在 Solid Start 中使用 Vue 风格的模板写法确实会遇到问题，因为 Solid 使用 JSX 而不是 Vue 的模板语法。不过，你可以通过一些方式来减少这种转换带来的不适感。

首先，你需要知道在 Solid Start 中，组件通常是用 JSX 编写的，并且使用 createSignal 来管理状态。你不能直接使用 Vue 的双花括号语法 {{ message }} 来插入数据。

这里有一个简单的例子，展示如何在 Solid Start 中实现类似的功能：

import { createSignal } from 'solid-js';



function MyComponent() {

  const [message] = createSignal('Hello from Vue-style!');



  return (

    
{message()}


  );

}



export default MyComponent;


在这个例子中，createSignal 创建了一个响应式的 message 变量，然后在 JSX 中通过 {message()} 的方式来插入它的值。

关于防止注入，确保你从用户那里获取的数据经过适当的验证和清理，避免 XSS 攻击。在 SolidJS 中，插入内容默认是安全的，因为它会自动转义 HTML 字符串。不过，如果你使用 innerHTML 或类似的 API，那你需要特别小心。

总之，虽然不能完全兼容 Vue 的模板语法，但通过学习和使用 Solid 提供的工具和语法，你会很快适应的。
点赞
2026-03-22 14:18
相关推荐
元素
元素
工具
博客
问答
登录/注册