Vue2/3组件上使用v-model双向绑定

首先要明确它就是个语法糖 （v-model 相当于 onChange 的语法糖）

<input type="text" :value= 'name' @input='name = $event.target.value'>

 <p>{{name}}</p>

上面这个功能和v-model是一致的
你自己也可以用@input监控输入的结果 就可以找到target下面的value

下面有一个场景
要实现一个搜索模糊匹配功能，考虑到组件的复用，就单独把搜索框抽出来作为一个子组件。在以往的开发中，
一般会在input框中的值变化时向父组件emit一个事件，并带上一些父组件中需要的参数（比如搜索的关键词，或者搜索之后返回的结果）

大概的实现方式如下：

 父组件
<template>
    <div>
        <search v-model="keywords"></search>
        <button @click="submit">提交</button>
    </div>
</template>
<script>
import search from '@/components/index/search.vue'
export default {
    data() {
        return {
            keywords: ''
        }
    },
    components: {
        search
    },
    methods: {
        submit() {
            console.log('keywords:', this.keywords)
        }
    }
}
</script>

子组件
<template>
    <div>
        <input :value="value" @input="$emit('input', $event.target.value)" type="text" name="keywords">
    </div>
</template>
<script>
export default {
    props: ['value']
}
</script>

上面是vue2的写法下面说下vue3的写法（这个更简单）

子组件
let emit = defineEmits(['update:modelValue'])

function test(value){
   emit('update:modelValue',value)
}


父组件
<location  v-model="locationVal" />

let  locationVal = ref(null)

然后在对应事件打印locationVal  就可以了