：这里我们监听了子组件发出的value-div事件。当事件触发时，它会执行一个箭头函数，将接收到的value参数（即div的文本内容）赋值给父组件的comment数据属性。
通过这种方式，我们成功地为contenteditable=”true”的div元素实现了类似v-model的双向数据绑定功能。
拓展：实现官方v-model支持（适用于Vue 2.x model选项或Vue 3.x）
如果希望子组件能够直接使用v-model指令，而不是自定义事件名，可以采用以下方式：
Vue 2.x model 选项
在CommentSection.vue中，添加model选项：
export default { model: { prop: 'textValue', // 定义 v-model 绑定的 prop 名称 event: 'input' // 定义 v-model 监听的事件名称 }, props: { textValue: String // 接收 v-model 传递过来的值 }, methods: { handleInput (e) { this.$emit('input', e.target.textContent); // 触发 'input' 事件 } }}
父组件使用：
Vue 3.x (推荐)
Vue 3 对v-model进行了改进，默认情况下，v-model会绑定modelValue prop 并监听update:modelValue事件。
<div id="chatId" @input="handleInput" :contenteditable="true" :placeholder="placeholder" class="..." v-text="modelValue" />export default { props: { modelValue: String, // 接收 v-model 传递的 modelValue prop placeholder: String }, emits: ['update:modelValue'], // 声明组件会触发的事件 methods: { handleInput (e) { this.$emit('update:modelValue', e.target.textContent); // 触发 update:modelValue 事件 } }}
父组件使用：
请注意，v-text指令用于初始化contenteditable div的文本内容，确保在父组件数据变化时，子组件的显示也能同步更新。
注意事项与总结
数据初始化： 上述手动实现方案仅处理了从子组件到父组件的数据流。如果需要从父组件向子组件初始化contenteditable div的内容，或者在父组件数据更新时同步子组件显示，你需要在子组件中添加一个props来接收父组件的值，并使用v-text或在mounted生命周期钩子中设置div.textContent。安全性： contenteditable div允许用户输入富文本内容（HTML标签）。在将用户输入保存到数据库或显示给其他用户之前，务必进行适当的HTML净化（Sanitization），以防止XSS攻击。用户体验： contenteditable div虽然灵活，但在某些方面可能不如原生textarea或input。例如，placeholder效果需要额外的CSS来模拟，回车键行为可能需要JavaScript处理。性能： 对于频繁的输入，@input事件会频繁触发。确保事件处理函数尽可能高效。
通过本文介绍的方法，您可以灵活地在Vue组件中使用contenteditable=”true”的div元素，并实现可靠的双向数据绑定，从而满足复杂的UI/UX需求。选择手动@event和$emit，或是更规范的v-model实现，取决于您的项目需求和组件复用性考量。
以上就是Vue组件中v-model与contenteditable div的实现指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1598885.html
微信扫一扫 
支付宝扫一扫 
