自定义组件V-Model

V-Model原理：

v-model 实际上是 v-bind 和 v-on 组合的语法糖

<input v-model='myValue'/>
//等价于
<input :value='myValue' @input='myValue=$event.target.value'/>

v-bind:modelValue=''  在input 上面绑定了一个名为 modelValue 的变量

v-on:input=''  重写了input事件，当我们修改了input里面的值时就会触发

同理用在自定义组件中

父组件

<template>
    <Son v-model='myValue'/>
</template>

<script setup>
import { ref } from "vue";
import Son from "son.vue"

const myValue = ref('')

</script>

子组件

在vue3 setup 语法中  defineProps和defineEmits 不需要引入

<template>
    //点击触发emit
    <div @click="upDate(666)">{{modelValue}}</div>
</template>

<script setup>
//父组件传进来的值
const props = defineProps({
    modelValue:{
        type:String,
    }
})
//接收的事件          
const emit = defineEmits(['update:modelValue'])

const upDate = (upValue)=>{
    emit("update:modelValue",upValue)
}

</script>

注意是 update 不是 updata ...

而且必须是 modelValue   当然这是在Vue3 中是这样的  在vue2中是 value

如果想多个 v-mode l绑定就使用 v-model 的参数

v-model 的参数 实现多个 v-model 绑定

<Son v-model:name="modelName" v-model:title="modelTitle" />

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

<script setup>
    const props = defineProps(["name","title"])
    const emit = defineEmits(["update:name","update:title"])
</script>