vue3-ts: v-model 和 props 的关系

在 Vue.js 中，v-model 是一个语法糖，它实际上是 :value 和 @input 事件的组合。
当你使用 v-model 绑定一个组件时，默认情况下，组件会通过 props 接收 value 这个 prop，
并通过触发 input 事件来更新父组件中的数据。

1、v-model 和 props 的关系

当你使用 <RichTextEditor v-model="msg"> 时，RichTextEditor 组件内部确实会通过 props 接收 value（默认的 prop 名称是 value，除非你自定义了 model 选项）。

例如，RichTextEditor 组件内部可能有这样的代码：

export default {
  props: ['value'], // 接收父组件通过 v-model 传递的值
  methods: {
    updateValue(newValue) {
      this.$emit('input', newValue); // 触发 input 事件，更新父组件的 msg
    }
  }
}

2、自定义 v-model 的 prop 和事件

如果你希望 v-model 使用不同的 prop 或事件名，可以在组件中通过 model 选项自定义：

export default {
  model: {
    prop: 'text', // 将 prop 名称从默认的 value 改为 text
    event: 'change' // 将事件名称从默认的 input 改为 change
  },
  props: ['text'], // 现在通过 props.text 接收数据
  methods: {
    updateValue(newValue) {
      this.$emit('change', newValue); // 触发 change 事件
    }
  }
}

父组件仍然可以使用 v-model，但内部会使用自定义的 prop 和事件：

<RichTextEditor v-model="msg"></RichTextEditor>

3、直接通过 props 接收数据

如果你不使用 v-model，而是直接通过 props 传递数据，可以这样写：

<RichTextEditor :value="msg" @input="msg = $event"></RichTextEditor>

这和 v-model 的效果是完全一样的，只是写法更显式。

4、总结

v-model 的数据在组件内部是通过 props 接收的（默认是 value，除非自定义）。

组件通过 $emit('input', newValue)（或自定义事件）通知父组件更新数据。

你可以直接通过 props 接收数据，但 v-model 只是语法糖，底层仍然是 props 和 events 的机制。

如果你的 RichTextEditor 组件需要同时支持 v-model 和手动 props 绑定，确保内部逻辑正确处理 value（或自定义 prop）和事件即可。