1. 普通input输入框双向绑定

<template>

    <!-- 1. 普通input输入框双向绑定 -->
    <!-- 其实等价于：<input :modelValue="title" @update:modelValue="newTitle=>title=newTitle"/> -->
    <input type="text" v-model="title" />
    <span>{{ title }}</span>
    
</template>

<script lang="ts" setup>
    import { ref,reactive } from 'vue'
    const title = ref("11")
 </script>

<style lang="scss">

</style>

2. 自定义组件双向绑定

Test.vue

<template>

    <!-- 2. 自定义组件双向绑定 -->
    父组件中: {{ weather }}<br/>
    子组件中: <CustomInput v-model="weather"/>
    <!-- 等价于下面 -->
    <!-- 1. 将值 绑定到 modelValue prop -->
    <!-- 2. 当 update:modelValue事件 触发时，通过子组件传入的参数，更新父组件中的值 -->
    <!-- <CustomInput :modelValue="weather" @update:modelValue="newWeather=>weather=newWeather"/> -->

</template>

<script lang="ts" setup>
    import { ref,reactive } from 'vue'
    import CustomInput from '@/views/test/CustomInput.vue'
</script>

<style lang="scss">

</style>

CustomInput

<template>
    {{ modelValue }}
    <button :class="{sunny:modelValue === 'sunny'}" @click="$emit('update:modelValue','sunny')">晴天-sunny</button>
    <button :class="{sunny:modelValue === 'rainy'}" @click="$emit('update:modelValue','rainy')">雨天-sunny</button>
</template>

<script lang="ts" setup>
    const props = defineProps(['modelValue'])
    const emits = defineEmits(['update:modelValue'])
    
</script>

<style lang="scss">
    .sunny {
        background: yellow;
    }
    .rainy {
        background: darkgray;
    }
</style>

3. 使用computed属性实现v-model双向绑定

Test.vue

<template>
   
    <!-- 3. 使用computed属性实现v-model双向绑定 -->
    父组件中: {{ value1 }}<br/>
    子组件中: <custom-input2 v-model="value1"/>

    

</template>

<script lang="ts" setup>
    import { ref,reactive } from 'vue'
   
    import CustomInput2 from '@/views/test/CustomInput2.vue'
    
    const value1 = ref("zzhua")
   
</script>

<style lang="scss">

</style>

CustomInput2.vue

<template>
    <!-- <input v-model="value" /> --> 
    <!-- 以上等价于下方 -->
    <input :value="value" @input="value = $event.target.value"/> 
    {{ modelValue }} - {{ value }}
    <!-- 过程分析: 
            1. 父组件通过v-model指令, 将值通过props的方式传递给了子组件定义的modelValue
            2. 子组件中使用计算属性value, 读此属性返回modelValue, 修改此属性将触发 update:modelValue事件
            3. 当子组件初始化时, 模板被渲染, 拿到父组件传过来的modelValue, 
               模板中用到计算属性value的地方，计算属性value的get将被触发,于是返回modeValue的值
            4. 当修改子组件input框中的内容时, 将会把修改后的内容赋值给计算属性value, 
               计算属性value的set将会触发，将会把修改后的内容交给父组件的update:modelValue事件处理函数,
               从而子组件又开始更新渲染模板，于是跟第三步是一样的
    -->
</template>

<script lang="ts" setup>
import { computed } from 'vue'

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
</script>

4. 自定义v-model对应的prop参数名

Test.vue

<template>

  

    <!-- 4. v-model:attr 自定义v-model对应的prop参数名 -->
    <!-- 默认情况下，v-model 在组件上都是使用 modelValue 作为 prop，
         并以 update:modelValue 作为对应的事件。
         我们可以通过给 v-model 指定一个参数来更改这些名字 
         （除此之外: 可以通过v-model:attr绑定多个v-model）
    -->
    <CustomInput3 v-model:title="bookTitle" />


</template>

<script lang="ts" setup>
    import { ref,reactive } from 'vue'
  
    import CustomInput3 from '@/views/test/CustomInput3.vue';
   
    const bookTitle = ref("bookTitle")
 


</script>

<style lang="scss">

</style>

CustomInput3

<template>

    <input type="text" :value="title" @input="$emit('update:title', $event.target.value)" />
    {{ title }}
</template>

<script setup>
    defineProps(['title'])
    defineEmits(['update:title'])
</script>

5. v-model支持修饰符

Test.vue

<template>

    <!-- 5. v-model的修饰符 -->
    <MyComponent v-model.capitalize="myText" />

</template>

<script lang="ts" setup>
    import { ref,reactive } from 'vue'
    
    import MyComponent from '@/views/test/MyComponent.vue';
   
    const myText = ref("myText")


</script>

<style lang="scss">

</style>

MyComponent.vue

<template>
    <input
        type="text"
        :value="modelValue"
        @input="handleInput"
    />
    {{ modelValue }}
</template>

<script lang="ts" setup>
    const props = defineProps({
        modelValue: String,
        modelModifiers: { default: () => ({}) } /* 这个prop可以拿到修饰符 */
    })
    console.log(props.modelModifiers) // { capitalize: true }

    const emit = defineEmits(['update:modelValue'])

    // 处理input事件
    function handleInput(e) {
        let value = e.target.value
        // 根据是否存在修饰符, 作进一步处理
        if(props.modelModifiers.capitalize) {
            value = value.charAt(0).toUpperCase() + value.slice(1)
        }
        emit('update:modelValue', value)
    }

</script>

<style lang="scss">

</style>