v-html 中使用v-model

在 Vue 中，v-model 指令通常用于绑定表单元素的值，以便将用户输入的数据绑定到 Vue 实例中的数据属性上。但是，有时候我们需要在渲染 HTML 内容时，也能够使用 v-model 来实现双向数据绑定。这时候，我们可以使用 v-html 指令与自定义组件结合使用。

具体来说，我们可以在自定义组件中使用 v-model 指令，然后在组件内部将 v-model 绑定到一个 props 属性上，这样就可以在使用组件时通过 v-model 双向绑定 HTML 内容了。

例如，我们可以创建一个名为 `HtmlEditor` 的自定义组件，并在其中使用 v-model 指令来实现双向绑定 HTML 内容：

<template>
  <div>
    <div contenteditable="true" @input="updateHtml">{{ value }}</div>
  </div>
</template>

<script>
export default {
  props: ['value'],
  methods: {
    updateHtml(event) {
      this.$emit('input', event.target.innerHTML);
    }
  }
}
</script>

在上面的代码中，我们通过 `props: ['value']` 定义了一个名为 `value` 的 props 属性，并在组件模板中使用了 v-model 指令来双向绑定该属性。在组件内部，我们将 contenteditable 属性设置为 true，以便让用户可以编辑 HTML 内容，并通过 @input 事件来更新组件的 value 属性。最后，我们通过 `$emit` 方法将更新后的 HTML 内容发送给父组件。

在使用该组件时，我们只需要使用 v-model 指令来绑定 HTML 内容即可：

<template>
  <div>
    <html-editor v-model="htmlContent"></html-editor>
  </div>
</template>

<script>
import HtmlEditor from './HtmlEditor.vue';

export default {
  components: {
    HtmlEditor
  },
  data() {
    return {
      htmlContent: '<p>Hello, world!</p>'
    }
  }
}
</script>

上面的代码中，我们将 `<html-editor>` 组件包含在父组件模板中，并使用 v-model 指令来绑定父组件中的 `htmlContent` 数据属性。这样，在编辑器中输入或修改 HTML 内容时，`htmlContent` 数据属性也会被同步更新。