Vue prop - 在字符串[duplicate]中传递单引号和双引号

Question

This question already has an answer here:

• What's the best practice to set html attribute via PHP? 4 answers
• How to properly escape html form input default values in php? 4 answers

The problem

I have a string like this (containing: both single and double quotes).

She said: "Hey! That's my bike!!"

I need it to be a title in a Vue component. I could pass it into a slot, but for other reasons, it would be awesome if I could pass it into a prop, as such:

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

Solution-attempts

Attempt1: I've tried escaping the quotation-marks, but that doesn't work. Like this:

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

Attempt2: I could live without double-quotes, and do something like this:

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

... but it's not ideal, since it's the end-users setting that page title. So it's kinda crap disallowing/automatically replacing this one (quite oftenly used) character.

Attempt3: JSON-encode it, but that generates a long string and I need to utilize the solution from attempt2, in order to make this work anyway. So it still doesn't make it possible to have both single and double quotes in the page titles.

---

Ideally, I'm looking for a magical function, that I can run any string through in PHP, outputting a JSON-object. That I can then pass as a prop and parse inside my Vue Component, ensuring that both single and double quotes can squeeze through that keyhole.

</div>