解决方案：

感谢@Jeronimas，我想出了如何在 vue 中使用 dynamic components 。基本上，您创建一个 child component，它在 <p> 和 <input> 标记之间切换，具体取决于 props。您必须为此使用 <component> 元素，因为它是管理 dynamic components 的固有 vue 组件。

child:

<template>
  <input v-if="input" type="text" value="hello world">
  <p v-else>hello world</p>
</template>


<script setup>
const props = defineProps({
    input: Boolean
})
//emit input when form is submitted...
</script>

parent:

<template>
    <component :is="p" :input="true"/>
</template>


<script setup>
import p from './p.vue'
</script>

Vue 很棒 <3。

原始问题：

是否可以将文本输入到 <p> 标记中，以便将其存储在数据库中？我想构建一个“实时”CMS，类似于 wordpress/webflow 并使用格式化的 <input> 字段而不是 <p>/<h> 元素会使 html 变得混乱，因为基本上你必须创建两个相同的站点，一个带有普通文本标签，另一个带有输入字段，看起来像普通文本标签。

我想知道是否有一种方法可以操纵像 ref 这样的反应性对象以使其成为可能？

或者，您可以创建一个完全没有普通文本标签的网站，而是使用输入字段占位符，但这可能会扰乱 SEO。