vue中组件使用v-model双向绑定

在我们开发时候经常会公用一个组件，例如你写了一个很漂亮的搜索框，搜索框可以封装成一个组件：

<template>
  <div class="container">
    <div class="conP">
            <input class="inpt1" ref="myInput" type="text"   placeholder="客户名称,联系电话搜索" v-model="activeInput" >
            <div>
                <van-icon name="search" class="s1" />
            </div>
            <div>
                <van-icon name="cross" @click="deleteMe" class="s2"/>
        </div>
      <div class="s3" @click="searChList">
        | 搜索
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      key: '',
    };
  },
   props: {
    'value':{
        type:String,
        default:''
    },
  },
  computed:{
  //此处通过计算属性重新定义一个activeInput
      activeInput:{
        get(){
            return this.value;
        },
        set(value){
            this.$emit("input",value);
        }
      }
  },
  methods: {
    deleteMe () {
      this.activeInput = '';
    //   this.detailsArr=[]
    },
    searChList(){
        this.$emit('searChList')
    }
  }
};
</script>
<style lang="less" scoped>
//省略漂亮的样式
</style>

在组件中使用的时候引入

<div>
	<inputSearch v-model="orderNumber" @searChList='searChList' class="headSearch"></inputSearch>
	<inputSearch :value='orderNumber' @input='orderNumber=value'></inputSearch>//此写法是等同于上面的写法
</div>
export default {
  data () {
    return {
      orderNumber:'sss',
    };
  },
 }