（原创）vue中v-model的高级用法（多用于组件封装）

input中使用v-model

先从最基础的使用说起，input中使用v-model完成双向绑定的原理：
v-bind:value的数据绑定和@input的事件监听；

<input v-model="message" />
<!-- 相当于  -->
<input :value="message" @input="message = $event.target.value" />

组件中使用v-model

对比input元素不同的只是属性的名称和事件触发的名称而已，固定用法，默认的属性为model-value，方法为update:model-value！

<my-input v-model="message" />
<!-- 相当于  -->
<my-input :model-value="message" @update:model-value="message = $event" />

具体的使用方法如下：
使用这种方法主要是代码优雅并且整洁，如下子组件就不需要再传递到父组件就行值的修改。

<!-- App.vue -->
<my-input v-model="msg1"></my-input>

<template>
  <div>
    <input type="text" :value="modelValue" @input="input">
  </div>
</template>

<script>
  export default {
    props: {
      modelValue: String
    },
    methods: {
      input(e) {
        this.$emit('update:modelValue', e.target.value)
      }
    },
  }
</script>

升级 —— 使用计算属性的setter和getter来完成。

众所周知，子组件不能随意修改父组件传递下来的数据（props），因此可以通过计算属性来更新数据。

<template>
  <div>
    <input type="text" v-model="value">
  </div>
</template>

<script>
  export default {
    props: {
      modelValue: String
    },
    computed: {
        value: {
            get() {
                return this.modelValue
            },
            set(value) {
                this.$emit('update:modelValue', value)
            }
        }
    }
  }
</script>

再升级 —— 绑定多个属性（可以给v-model传入一个参数，那么这个参数的名称就是我们绑定属性的名称）

v-model:title相当于做了两件事：①绑定了title属性；②监听了 @update:title的事件；

<!-- App.vue -->
<my-input v-model="msg" v-model:title="title"></my-input>

<template>
  <div>
    <input type="text" :value="modelValue" @input="input">
    <input type="text" :value="title" @input="input1">
  </div>
</template>

<script>
  export default {
    props: {
      modelValue: String,
      title: String
    },
    methods: {
      input(e) {
        this.$emit('update:modelValue', e.target.value)
      },
      input(e) {
        this.$emit('update:title', e.target.value)
      }
    },
  }
</script>

以上就是组件中v-model的基本用法，但是一般用的比较多的是弹窗中，如下实例！

实例：控制弹窗显隐

需求：在父组件可以点击打开弹窗，子组件点击关闭弹窗

<!-- 父组件 -->
<modal v-model:showModal="showModal"></modal>
<button @click="showModal=true">打开弹窗</button>

<!-- modal.vue -->
<template>
  <div class="bg" v-if="showModal">
    <div class="modal">
      那个男人他来了，他真的来了 <br>
      <button @click="close">关闭弹窗</button>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      showModal: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      close() {
        this.$emit('update:showModal', false)
      }
    },
  }
</script>

以上就是v-model在组件中的高级用法，有何错误或拓展，望提出~~~