quillEditor vue3 数据双向绑定
时间: 2024-02-05 13:06:12 浏览: 257
vue实现的双向数据绑定操作示例
quillEditor的Vue3版本实现数据双向绑定的方法如下所示:
在父组件中,使用v-model指令将变量与子组件的数据进行双向绑定。在子组件中,使用v-model指令绑定input的值,并在input的change事件中使用$emit方法触发update事件,将input的值传递给父组件。
具体代码如下:
```javascript
// 父组件
<template>
<quill-editor v-model="content"></quill-editor>
</template>
<script>
import QuillEditor from './QuillEditor.vue';
export default {
data() {
return {
content: '',
};
},
components: {
QuillEditor,
},
};
</script>
// 子组件 QuillEditor.vue
<template>
<div>
<input v-model="text" @change="handleChange" />
</div>
</template>
<script>
export default {
props: ['value'],
data() {
return {
text: this.value,
};
},
methods: {
handleChange() {
this.$emit('update:value', this.text);
},
},
};
</script>
```
阅读全文