javascript - Vue prop - 在字符串中同时传递单引号和双引号

Question

问题

我有一个这样的字符串（包含：单引号和双引号）。

她说：“嘿！那是我的自行车！！”

我需要它成为 Vue 组件中的标题。我可以将它传递到一个插槽中，但出于其他原因，如果我可以将它传递到一个道具中，那就太棒了，如下所示：

<?php
$title = "She said: \"Hey! That's my bike!!\""
?>
<page-object
  title="<?php echo $title; ?>"
>
</page-object>

解决方案尝试

Attempt1：我试过转义引号，但这不起作用。像这样：

<page-object
  title="Hey, single quote: ' and double quote: \" ... Doesn't work!"
>
</page-object>

Attempt2：我可以不用双引号，做这样的事情：

<?php
$title = "She said: \"Hey! That's my bike!!\""
$title = str_replace( '"', "'", $title );
?>
<page-object
  title="<?php echo $title; ?>"
>
</page-object>

...但这并不理想，因为最终用户设置了该页面标题。因此，不允许/自动替换这个（经常使用的）字符有点废话。

Attempt3：对其进行 JSON 编码，但这会生成一个长字符串，我需要利用尝试 2 中的解决方案，以使其正常工作。所以它仍然不能在页面标题中同时使用单引号和双引号。

---

理想情况下，我正在寻找一个神奇的函数，我可以在 PHP 中运行任何字符串，输出 JSON 对象。然后我可以将其作为道具传递并在我的 Vue 组件中解析，确保单引号和双引号都可以挤过那个锁孔。

标签： javascriptphpvue.js