vue3 中的 v-model 是 props 和 emit 语法糖

props ： value –> modeValue

event：input –> update:modelValue

默认的 v-model

子组件

<template>
  <div class="container" v-show="modelValue">
    <button @click="close">colse</button>
  </div>
</template>
<script setup lang="ts">
defineProps<{
  modelValue:boolean;
}>()
​
const emit = defineEmits(['update:modelValue']);
​
const close = () => {
    emit('update:modelValue',false)
}
​
</script>

父组件

<template>
  <div>this is HelloWorld</div>
  <button @click="show = !show">开关{{show}}</button>
  <hr>
  <ChildComponent v-model="show" ></ChildComponent>
</template>
​
<script setup lang="ts">
import {ref} from "vue";
import ChildComponent from "./childComponent.vue";
const show = ref(false)
</script>
​

绑定多个 v-module

子组件

<template>
  <div class="container" v-show="modelValue">
    <button @click="close">colse</button>
    <button @click="handelCount">count10</button>
  </div>
</template>
<script setup lang="ts">
defineProps<{
  modelValue:boolean;
  count:number
}>()
​
const emit = defineEmits(['update:modelValue','update:count']);
​
const close = () => {
    emit('update:modelValue',false)
}
const handelCount = ()=>{
    emit("update:count",10)
}
​
</script>

父组件

<template>
  <div>this is HelloWorld</div>
  <button @click="show = !show">开关{{show}}</button>
  <button @click="handelCount">count10</button>
  <hr>
  <ChildComponent v-model="show" v-model:count="count"></ChildComponent>
</template>
​
<script setup lang="ts">
import {ref} from "vue";
import ChildComponent from "./childComponent.vue";
const show = ref(false)
const count = ref(0)
const handelCount = ()=>{
    count.value ++;
}
</script>