自定义组件的v-model

<input v-model="searchText">

 等价于

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

下面直接举例

父组件：

<template>
<div>
    <basetest v-model="textvalue">
        <!--插槽可以放任何模板代码，甚至是组件(不能访问子组件数据)-->
        我是default插槽{{msg}}

        <!--具名插槽-->
        <template v-slot:head>
            <div>我是head插槽</div>
        </template>
    </basetest>
    {{textvalue}}
</div>
</template>

<script>
import basetest from './basetest';
export default {
    components:{
        basetest: basetest
    },
    data(){
        return {
            textvalue: '',
            msg: '333'
        }
    }
}
</script>

子组件：

<template>
    <div>
        <div><input type="text" :value="value" @input="myfunc"></div>
        <label>
            <slot>没有提供内容的时候显示</slot>
        </label>
        <span>
            <slot name="head"></slot>
        </span>
        <button @click="btnFun">取我的值</button>
    </div>
</template>

<script>
export default {
    model:{
        prop: 'value',
        event: 'testFunc'
    },
   props: {
       value: ''
   },
   methods:{
       myfunc(e){
           this.$emit('testFunc', e.target.value)
       },
       btnFun(){
           this.$emit('testFunc', 'yyyyyy')
       }
   }
}
</script>

只要触发了testFunc方法，都能改变父组件textvalue的值