Vue组件间通信，聊聊Vue defineModel()的使用

defineModel() 是 Vue 3 中的一个 Composition API，它用于创建响应式的数据和计算属性。在 Vue 2 中，它被称为 Vue.observable()。

以下是一个简单的 Vue 3 组件示例，展示如何使用 defineModel() 来创建响应式数据：

<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <button @click="state.increment">Increment</button>
  </div>
</template>
 
<script>
import { defineComponent, reactive } from 'vue';
 
export default defineComponent({
  setup() {
    const state = reactive({
      count: 0,
      increment() {
        state.count++;
      }
    });
 
    return { state };
  }
});
</script>

在这个例子中，state 是一个响应式对象，它包含当前的 count 值和一个 increment 方法。当点击按钮时，increment 方法会被触发，count 的值会增加。这展示了如何在 Vue 3 组件中使用 reactive() 来创建响应式状态。