：父组件通过@value-div监听子组件发出的自定义事件。当事件触发时，它会执行一个箭头函数(value) => comment = value，将子组件传递过来的value（即div的文本内容）赋值给父组件的comment数据属性。
至此，我们就成功地为contenteditable=”true”的div实现了双向数据绑定。当用户在CommentSection组件的div中输入内容时，MainPage组件的comment数据属性会实时更新。
进阶：实现组件级的 v-model 兼容
虽然上述方法能够解决问题，但如果希望自定义组件能够像原生表单元素一样直接使用v-model语法，我们可以遵循Vue 3推荐的modelValue prop和update:modelValue事件约定。
子组件 CommentSection.vue (v-model 兼容版)
export default { // 声明 modelValue prop，用于接收 v-model 绑定的值 props: { modelValue: { type: String, default: '' }, placeholder: { type: String, default: 'Leave a message' } }, mounted() { // 初始化时设置 div 的内容，以支持 v-model 的初始值 if (this.modelValue) { this.$refs.editableDiv.textContent = this.modelValue; } }, methods: { handleChange (e) { // 发出 update:modelValue 事件，Vue 会自动更新 v-model 绑定的数据 this.$emit('update:modelValue', e.target.textContent); } }, watch: { // 监听 modelValue 变化，如果外部更新了 modelValue，则更新 div 的内容 modelValue(newValue) { if (this.$refs.editableDiv.textContent !== newValue) { this.$refs.editableDiv.textContent = newValue; } } }}#chatId[contenteditable="true"]:empty:not(:focus):before { content: attr(placeholder); color: #9ca3af;}
代码解释：
props: { modelValue: { type: String, default: ” } }：声明一个名为modelValue的prop，这是v-model默认绑定的prop名称。this.$emit(‘update:modelValue’, e.target.textContent)：当内容变化时，发出update:modelValue事件，Vue会自动处理这个事件并更新v-model绑定的数据。mounted() 和 watch：为了实现完整的双向绑定（即父组件更新v-model绑定的数据时，子组件的div内容也能相应更新），我们需要在mounted生命周期钩子中设置初始值，并通过watch监听modelValue的变化来同步div的内容。这里使用了ref来直接访问DOM元素。
父组件 MainPage.vue (v-model 兼容版)
import CommentSection from '@/components/CommentSection.vue'export default{ name: 'MainPage', data(){ return{ comment: '初始评论内容', // 可以设置初始值 } }, components: { CommentSection }, methods:{ submitPost(){ console.log('提交的评论内容:', this.comment); }, },}
通过这种方式，CommentSection组件现在完全兼容v-model语法，使得其使用方式更加简洁和符合Vue的惯例。
注意事项与最佳实践
安全性（XSS防护）：contenteditable允许用户输入任意HTML内容。如果这些内容最终会被渲染到页面上，务必进行严格的净化和转义，以防止跨站脚本攻击（XSS）。例如，可以使用DOMPurify等库来清理用户输入。可访问性（Accessibility）：contenteditable div在语义上并非标准的文本输入框。为了提供更好的用户体验和辅助技术支持，建议添加适当的ARIA属性，例如role=”textbox”、aria-label或aria-labelledby，以增强其语义化。占位符样式：示例中提供的CSS样式#chatId[contenteditable=”true”]:empty:not(:focus):before是实现contenteditable div占位符效果的常见方法。它确保在div为空且未聚焦时显示占位符文本，提供良好的用户提示。自动高度：overflow-hidden 结合 contenteditable 通常可以实现内容超出时自动扩展高度的效果。为了更好的控制，可以设置min-height来确保初始高度，并配合box-sizing: border-box等CSS属性。富文本处理：如果需要支持粗体、斜体等富文本功能，仅仅获取textContent是不够的。你需要获取innerHTML，并在$emit时传递HTML字符串，同时在父组件渲染时使用v-html（并注意XSS防护）。
总结
虽然
以上就是Vue组件中contenteditable div元素实现双向数据绑定的教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1599823.html
微信扫一扫 
支付宝扫一扫 
