v-model拆分三种拆分写法

v-model 是 Vue.js 框架中常用的双向绑定指令，用于将表单元素的值与数据模型进行双向绑定。以下是三种常见的拆分写法：

1. 使用 v-bind 和 v-on 指令拆分：

   <input :value="message" @input="message = $event.target.value" />

上述代码中，使用 v-bind 指令将输入框的值绑定到 message 变量，使用 v-on 指令监听输入框的 input 事件，将输入的值更新到 message 变量。

2. 使用计算属性拆分：

   <input :value="computedMessage" @input="updateMessage" />
   
   computed: {
     computedMessage: {
       get() {
         return this.message;
       },
       set(value) {
         this.message = value;
       }
     }
   },
   methods: {
     updateMessage(event) {
       this.message = event.target.value;
     }
   }

上述代码中，通过计算属性 computedMessage 实现了对 message 变量的双向绑定。在计算属性的 get 方法中返回 message 的值，在 set 方法中更新 message 的值。同时，通过监听 input 事件，调用 updateMessage 方法更新 message 的值。

3. 使用自定义组件拆分：

   <my-input v-model="message"></my-input>
   
   // MyInput.vue
   <template>
     <input :value="value" @input="$emit('input', $event.target.value)" />
   </template>
   
   <script>
   export default {
     props: ['value']
   };
   </script>

上述代码中，通过自定义组件 MyInput 实现了对 v-model 的拆分。在组件中，使用 props 属性接收父组件传递的值，并将值绑定到 input 元素的 value 属性上，同时通过 $emit 方法触发 input 事件，将输入的值传递给父组件。

以上三种拆分写法都可以实现 v-model 的功能，开发者可以根据需求和个人偏好选择适合的写法。