组件通信-v-model

概述：实现 父↔子 之间相互通信。
前序知识 ------ v-model的本质

html 复制代码

<!-- 使用v-model指令 -->
<input type="text" v-model="userName">

<!-- v-model的本质是下面这行代码 -->
<input 
  type="text" 
  :value="userName" 
  @input="userName =(<HTMLInputElement>$event.target).value"
>

3.（父组件）组件标签上的v-model的本质：:moldeValue ＋ update:modelValue事件。

html 复制代码

<script setup lang="ts">
import { ref } from 'vue'
import AtInput from './AtInput.vue'
const username = ref('zhangsan')
</script>

<template>
    <div class="father">
        <h1>父组件</h1>
        <!-- 第一种写法 -->
        <AtInput v-model="username" />
        <!-- 第二种写法 -->
        <!-- <AtInput :modelValue="username" @update:modelValue="username = $event" /> -->
    </div>

</template>

(子组件) AtInput组件中：

html 复制代码

<script setup lang="ts">
// 接收props
defineProps(['modelValue'])
 // 声明事件
const emit= defineEmits(['update:modelValue'])
</script>

<template>
    <div class="input">
        <input type="text" 
            :value="modelValue"
            @input="emit('update:modelValue',(<HTMLInputElement>$event.target).value)"
        >
    </div>

</template>

4.也可以更换value，例如改成ming

javascript 复制代码

<!-- 也可以更换value，例如改成abc-->
<AtInputv-model:ming="userName"/>

<!-- 上面代码的本质如下 -->
<AtInput:ming="userName" @update:ming="userName = $event"/>

AtInput组件中

html 复制代码

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

<script setup lang="ts" name="AtInput">
  // 接收props
  defineProps(['ming'])
  // 声明事件
  const emit = defineEmits(['update:ming'])
</script>

5.如果value可以更换，那么就可以在组件标签上多次使用v-model

<AtInput v-model:ming="userName" v-model:mima="password"/>